首页 > 编程笔记 > JavaScript笔记 阅读:1,135

JS select事件:选择文本

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>

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章