javascript-获取用户选中的文本框内容

用户选中的文本框内容

概述

在日常开发中，什么时候需要监听用户在文本框中输入的内容？富文本编辑器就是一个典型的例子。

技术实现

HTML5在扩展方案中对文本框提供2个属性：selectionStart和selectionEnd（即文本选区开头和结尾的偏移量）。如此，就可以通过这2个属性截取文本框的文本，获取用户真正选中的文本。
IE8提供了一个document.selection对象，能获取整个文档被选中的文本。不过，配合select事件一起使用，就能获取用户选中的文本。我们需要用到范围range，利用范围获取文本。

代码如下

<form name="myform">
    <label for="name">姓名：</label>
    <input type="text" name="name" autofocus id="name" placeholder="请输入姓名" value="嘿哈"><br>
    <label for="note">备注：</label>
    <textarea id="note" placeholder="请输入备注" maxlength="3">递四方</textarea><br>
    <button name="自定义按钮">自定义按钮</button><br>
</form>
<script>
    (function(){
        var form = document.forms['myform']
        var elements = form.elements
        var inputText = elements['name']

        // 监听文本框的select事件
        EventUtil.addHandler(inputText, 'select', function(event){
            event = EventUtil.getEvent(event)
            var target = EventUtil.getTarget(event)
            alert(getSelectedText(target))
        })

        // 跨浏览器获取用户在文本框中选中的文本
        function getSelectedText(textbox){
            if (typeof textbox.selectionStart === 'number') {   
                // IE9及以上，其他常用浏览器
                return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd)        
            } else if (document.selection) {
                // IE8
                return document.selection.createRange().text            
            }
        }
    })()
</script>