createTextRange()的使用示例含文本框选中部分文字内容

前端技术 2023/09/08 JavaScript
复制代码 代码如下:

<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>

本文地址：https://www.stayed.cn/item/22834

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案