星空网 > 软件开发 > Java

深入理解表单脚本系列第三篇——选择文本

×
目录
[1]select() [2]select事件 [3]setSelectionRange()

前面的话

  表单是最早用来与用户交互的工具,具有丰富的控件和属性。基本上,它们通过各种控件和属性就可以解决大部分问题。但还有一些问题还是需要表单脚本来实现的,比如本文将要说到的选择文本

 

select()

  select()方法用于选择文本框(指type为text的input元素和textarea元素)中的所有文本,该方法不接受参数,且无返回值

<input id="text" value="123"><button id="btn">选择文本</button><script>btn.onclick = function(){  text.select();}</script>

select事件

  与select()方法对应的,是一个select事件。在选择了文本框中的文本时,就会触发select事件

  不过关于什么时间触发select事件有分歧。IE8-浏览器中,只要用鼠标选择了一个字符,未释放鼠标前,就可以触发select事件;而其他浏览器中,要释放鼠标才会触发

<input id="text" value="123"><script>text.onselect = function(){  this.style.backgroundColor = 'pink';}</script>

setSelectionRange()

  setSelectionRange()方法用于选择文本框中的部分文本,这个方法接收两个参数:要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引(类似于substring()方法的两个参数)

  firefox浏览器使用该方法,可以选择文本,但却没有获取焦点;而其他浏览器使用该方法可以自动获取焦点

  [注意]IE8-浏览器不支持

<input id="text" value="1234567890"><button id="btn">选择前3个字符</button><script>btn.onclick = function(){  text.focus();  text.setSelectionRange(0,3)  }</script>

  IE8-浏览器支持使用范围选择部分文本。要选择文本框中的部分文本,必须首先使用createTextRange()方法创建一个范围,并将其放在恰当的位置上。然后,再使用moveStart()和moveEnd()这两个范围方法将范围移动到位

  不过,在调用这两个方法以前,还必须使用collapse()将范围折叠到文本框的开始位置。此时,moveStart()将范围的起点和终点移动到了相同的位置,只要再给moveEnd()传入要选择的字符总数即可。最后一步,就是使用范围的select()方法选择文本

<input id="text" value="1234567890"><button id="btn">选择前3个字符</button><script>btn.onclick = function(){  var range = text.createTextRange();  range.collapse(true);  range.moveStart('character',0);  range.moveEnd('character',3);  range.select();}</script>

兼容 

function selectText(textbox, startIndex, stopIndex){  if(textbox.setSelectionRange){    textbox.setSelectionRange(startIndex, stopIndex);  } else if(textbox.createTextRange){    var range = textbox.createTextRange();    range.collapse(true);    range.moveStart('character',startIndex);    range.moveEnd('character',stopIndex);    range.select();  }  textbox.focus();}




原标题:深入理解表单脚本系列第三篇——选择文本

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

亚马逊运营的一天:https://www.ikjzd.com/articles/138517
如何写一个好的标题(阿里国际站)?:https://www.ikjzd.com/articles/138518
一个人做shopify—facebook广告投放扩量心得:https://www.ikjzd.com/articles/138521
亚马逊Listing综合权重,如何卡位以及构建CPC广告组?:https://www.ikjzd.com/articles/138522
早期评论者计划---亚马逊新品评论的福音:https://www.ikjzd.com/articles/138523
超级品牌和超级供应链的博弈:https://www.ikjzd.com/articles/138524
大福地快捷酒店预订 大福酒店怎么走:https://www.vstour.cn/a/365187.html
三亚有哪些酒店值得入住?:https://www.vstour.cn/a/366173.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流