2025年3月30日 星期日 甲辰(龙)年 月廿九 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

JS select事件:选择文本

时间:03-07来源:作者:点击数:58

JavaScript 中,当在文本框或文本区域内选择文本时,将触发 select 事件。通过该事件可以设计用户选择操作的交互行为。

在 IE 9+、Opera、Firefox、Chrome 和 Safari 中,只有用户选择了文本且释放鼠标,才会触发 select 事件;但是在 IE8 及更早版本中,只要用户选择了一个字母,不必释放鼠标,就会触发 select 事件。另外,在调用 select() 方法时也会触发 select 事件。

【示例】在下面的示例中,当选择第 1 个文本框中的文本时,则在第 2 个文本框中会动态显示用户所选择的文本。

  • <input type="text" id="a" value="请随意选择字符串" />
  • <input type="text" id="b" />
  • <script>
  • var a = document.getElementsByTagName("input")[0];
  • // 获取第一个文本框的引用指针
  • var b = document.getElementsByTagName("input")[1];
  • // 获取第二个文本框的引用指针
  • a.onselect = function(){ // 为第一个文本框绑定select事件处理函数
  • if (document.selection){ // 兼容IE
  • o = document.selection.createRange(); // 创建一个选择区域
  • if(o.text.length > 0) // 如果选择区域内存在文本
  • b.value = o.text; // 则把该区域内的文本赋值给第二个文本框
  • }else{ // 兼容DOM
  • p1 = a.selectionStart; // 获取文本框中选择的初始位置
  • p2 = a.selectionEnd; // 获取文本框中选择的结束位置
  • b.value = a.value.substring(p1, p2);
  • // 截取文本框中被选取的文本字符串,然后赋值给第二个文本框
  • }
  • }
  • </script>
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门