createTextRange()的使用示例含文本框选中部分文字内容
更新时间：2014年02月24日 15:03:00 作者：
这篇文章主要介绍了createTextRange()的使用示例,需要的朋友可以参考下
复制代码 代码如下:
<script language="javascript">
function test()
{
var rng=document.body.createTextRange();
alert(rng.text)
}
function test1()
{
var rng=document.body.createTextRange();
alert(rng.htmlText)
}
</script>
<input type="button" onclick="test()" value="text">
<input type="button" onclick="test1()" value="htmlText">
获取指定文本框中的选中的文字：只响应第一个文本框
复制代码 代码如下:
<input id="inp1" type="text" value="1234567890">
<input id="inp2" type="text" value="9876543210">
<input type="button" onclick="test()" value="确定">
<script language="javascript">
function test()
{
var o=document.getElementById("inp1")
var r = document.selection.createRange();
if(o.createTextRange().inRange(r))
alert(r.text);
}
</script>
页面文本倒序查找
复制代码 代码如下:
abababababababa
<input value="倒序查找a" onclick=myfindtext("a") type="button">
<script language ='javascript'>
var rng = document.body.createTextRange();
function myfindtext(text)
{
rng.collapse(false);
if(rng.findText(text,-1,1))
{
rng.select();
rng.collapse(true);
}else
{alert("end");}
}
</script>
聚焦控件后把光标放到最后
复制代码 代码如下:
<script language="javascript">
function setFocus()
{
var obj = event.srcElement;
var txt =obj.createTextRange();
txt.moveStart('character',obj.value.length);
txt.collapse(true);
txt.select();
}
</script>
<input type="text" value="http://toto369.net" onfocus="setFocus()">
得到文本框内光标位置
复制代码 代码如下:
<script language="javascript">
function getPos(obj){
obj.focus();
var s=document.selection.createRange();
s.setEndPoint("StartToStart",obj.createTextRange())
alert(s.text.length);
}
</script>
<input type="text" id="txt1" value="1234567890">
<input type="button" value="得到光标位置" onclick=getPos(txt1)>
控制input框内光标位置
复制代码 代码如下:
<script language="javascript">
function setPos(num)
{
text1.focus();
var e =document.getElementById("text5");
var r =e.createTextRange();
r.moveStart('character',num);
r.collapse(true);
r.select();
}
</script>
<input type="text" id="text5" value="1234567890">
<select onchange="setPos(this.selectedIndex)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
选中文本框中的一段文字
复制代码 代码如下:
<script language=javascript>
function sel(obj,num)
{
var rng=obj.createTextRange()
var sel = rng.duplicate();
sel.moveStart("character", num);
sel.setEndPoint("EndToStart", rng);
sel.select();
}
</script>
<input type="text" id="text1" value="1234567890">
<select onchange="sel(text1,this.value)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
控制文本框内光标的移动
复制代码 代码如下:
<input type="button" value="<" onclick=go(-1)>
<input id="demo" value="这里是文字">
<input type="button" value=">" onclick=go(1)>
<script language="javascript">
function go(n){
demo.focus();
with(document.selection.createRange())
{
moveStart("character",n);
collapse();
select();
}
}
</script>
相关文章
这篇文章主要为大家详细介绍了js实现掷骰子小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要介绍了JS学习笔记之贪吃蛇小游戏demo,结合实例形式详细分析了javascript实现贪吃蛇小游戏的原理、步骤与相关实现技巧,需要的朋友可以参考下2019-05-05
一般来说中文乱码用js结合escape来解决，但下面的方法是一般后台中的一些问题，需要注意下输出顺序，先声明编码类型在输出内容是个好习惯。2009-12-12
这篇文章主要介绍了详解webpack的proxyTable无效的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了js unicode 编码解析关于数据转换为中文的两种方法,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了js读取并解析JSON类型数据的方法,具体分析了json格式的功能、用途与JS解析技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了webpack3升级到webpack4遇到问题总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要给大家介绍了关于微信小程序前后端数据交互的相关资料,通过小程序向后端发送请求,然后后端从数据库获取车源和求购的数量反馈给小程序,最后将这两个数据显示出来,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了微信小程序实现验证码倒计时效果，手机登录、填手机号获取验证码，倒计时后重新获取效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
本文主要介绍了JavaScript可选链的实现示例,它通过使用问号（?）来判断属性或函数是否存在,避免了因为属性或函数不存在而导致的错误,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
最新评论