用户选中的文本框内容
概述
在日常开发中,什么时候需要监听用户在文本框中输入的内容?富文本编辑器就是一个典型的例子。
技术实现
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']
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') {
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd)
} else if (document.selection) {
return document.selection.createRange().text
}
}
})()
</script>