首先我们先要获取光标位置,这一步还是比较简单的,看下代码
// 用 rangeData 对象作为数据存储并获得焦点
var rangeData = {start: 0, end: 0, text: "" };
textarea.focus();
// 对于非 IE 浏览器获取选区的起始和末尾位置其实非常容易
rangeData.start= el.selectionStart;
rangeData.end = el.selectionEnd;
// 扩展一下,通过截取我们可以得到光标的选区内容
rangeData.text = (rangeData.start != rangeData.end) ? el.value.substring(rangeData.start, rangeData.end): "";
在编辑器中,获取光标位置都是非常重要的,很多人可能认为较复杂,其实只要处理好浏览器的兼容,还是比较容易实现的,下面我弄了一个辅助方法
// 获取光标辅助方法
function getCursorPosition(textarea) {
var rangeData = {text: "", start: 0, end: 0 };
textarea.focus();
if (textarea.setSelectionRange) {
rangeData.start= textarea.selectionStart;
rangeData.end = textarea.selectionEnd;
rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): "";
} else if (document.selection) {
var i,
oS = document.selection.createRange(),
// Don't: oR = textarea.createTextRange()
oR = document.body.createTextRange();
oR.moveToElementText(textarea);
rangeData.text = oS.text;
rangeData.bookmark = oS.getBookmark();
for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {
// Why? You can alert(textarea.value.length)
if (textarea.value.charAt(i) == '\n') {
i ++;
}
}
rangeData.start = i;
rangeData.end = rangeData.text.length + rangeData.start;
}
return rangeData;
}
我们获取到位置之后就可以插入想要的数据了
function insertAtCursor(myField, myValue) {
if (document.selection) {
// IE support
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
sel.select();
} else if (myField.selectionStart || myField.selectionStart == '0') {
// MOZILLA/NETSCAPE support
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
var beforeValue = myField.value.substring(0, startPos);
var afterValue = myField.value.substring(endPos, myField.value.length);
myField.value = beforeValue + myValue + afterValue;
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
myField.focus();
} else {
myField.value += myValue;
myField.focus();
}
}
如何使用?
insertAtCursor(document.getElementById('input'),"33333");