web应用需求中,很多时候需要截取当前输入框中光标的位置,然后截获用户输入。在指定的输入框中插入文本。
而获取光标位置对于 IE 来说可是相当变态,缘于其复杂的 textrange 特性,而其他浏览器则实现了html5的相关属性,处理很简洁。
var TextRangeUtil = function() { var re = {}; var nonIE = function(fieldId) { var field = document.getElementById(fieldId); var pos = {}; pos.start = field.selectionStart; pos.end = field.selectionEnd; return pos; }; var IE = function(fieldId) { var field = document.getElementById(fieldId); var pos = {}; var range = document.selection.createRange(); if (fieldId != range.parentElement().id) return var range_all = document.body.createTextRange(); range_all.moveToElementText(field); for (var sel_start = 0; range_all.compareEndPoints('StartToStart', range) < 0; sel_start++) { range_all.moveStart('character', 1); } for (var i = 0; i <= sel_start; i++) { if (field.value.charAt(i) == '\n') sel_start++; } pos.start = sel_start; var range_all = document.body.createTextRange(); range_all.moveToElementText(field); for (var sel_end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; sel_end++) range_all.moveStart('character', 1); for (var i = 0; i <= sel_end; i++) { if (field.value.charAt(i) == '\n') sel_end++; } pos.end = sel_end; return pos; }; re.getTextRange = function(fieldId) { var field = document.getElementById(fieldId); if (typeof field.selectionStart === 'number') { re.getTextRange = nonIE; } else if (document.selection) { re.getTextRange = IE; } else { re.getTextRange = function(){}; } return re.getTextRange(fieldId); }; return re; } ();
返回是一个对象,此对象的re.start属性是光标的开始字符位置,re.end是光标的结束位置。