javascript 将值插入光标所在的文本区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5889127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Insert value into TEXTAREA where cursor was
提问by santa
I have a textarea and a div with values. When I click on a value I insert it into textarea. I need it to be inserted where my cursor was in textarea. Why do I say WAS? Because when I move it out and click on a value to insert, I assume it looses focus in the text area.
我有一个 textarea 和一个带有值的 div。当我点击一个值时，我将它插入到 textarea 中。我需要将它插入我的光标在 textarea 中的位置。为什么我说是？因为当我将它移出并单击要插入的值时，我认为它在文本区域中失去了焦点。
So, my question is, is there a way to "remember" the latest cursor position within textarea and then insert my values at that position?
所以，我的问题是，有没有办法“记住”textarea 中的最新光标位置，然后在该位置插入我的值？
Perhaps it could be a char number in a string?.. Currently I add it like this:
也许它可能是字符串中的字符数？..目前我这样添加：
input.val( function( i, val ) { return val + " " + myInsert + " "; } );
Also I use jQuery, perhaps I could use it?
我也使用 jQuery，也许我可以使用它？
采纳答案by Tim Down
I've written a cross-browser jQuery plug-in for dealing with the caret/selection in textareas and text inputs called Rangy inputs(terrible name, I really should think of a better one). A combination of methods from this and the techniques in Edgar Villegas Alvarado's answershould do the trick, although in IE, the focusoutevent fires too late and you'll need to use the proprietary beforedeactivateevent instead:
我编写了一个跨浏览器的 jQuery 插件，用于处理 textareas 中的插入符号/选择和称为Rangy 输入的文本输入（可怕的名字，我真的应该想到一个更好的）。结合此方法和Edgar Villegas Alvarado 的回答中的技术应该可以解决问题，尽管在 IE 中，focusout事件触发太晚，您需要改用专有beforedeactivate事件：
var $textBox = $("#foo");
function saveSelection(){
$textBox.data("lastSelection", $textBox.getSelection());
}
$textBox.focusout(saveSelection);
$textBox.bind("beforedeactivate", function() {
saveSelection();
$textBox.unbind("focusout");
});
When inserting text later, the following will insert text at the previous cursor position (or overwrite the previously selected text, if the user had selected any):
稍后插入文本时，以下内容将在前一个光标位置插入文本（或覆盖先前选择的文本，如果用户已选择任何文本）：
var selection = $textBox.data("lastSelection");
$textBox.focus();
$textBox.setSelection(selection.start, selection.end);
$textBox.replaceSelectedText("Some new text");
See jsFiddle example here: http://jsfiddle.net/rQXrJ/1/
请参阅此处的 jsFiddle 示例：http: //jsfiddle.net/rQXrJ/1/
回答by Ady Ngom
Here is a working example of what you are trying to do check it out at: http://jsfiddle.net/J5Z2n/1/
这是您尝试执行的工作的示例，请查看：http: //jsfiddle.net/J5Z2n/1/
Hello there my good friend.... how do you do
the jQuery:
jQuery：
function insertAt (myField, myValue, startSel, endSel) {
if (startSel || startSel == '0') {
var startPos = startSel;
var endPos = endSel;
myField.val(myField.val().substring(0, startPos)+ myValue+ myField.val().substring(endPos, myField.val().length));
}
else {
myField.val() += myValue;
}
}
// calling the function
var targetBox = $('textarea#insert'),
startSel,
endSel;
targetBox.bind('focusout', function() {
//insertAtCursor(this, 'how do you do');
startSel = this.selectionStart;
endSel = this.selectionEnd;
});
$("#myvalue").click(function() {
var myValue = $(this).text();
insertAt(targetBox, myValue, startSel, endSel);
});
The original function was borrowed from this post http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript
原来的功能是从这篇文章借用的 http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript
That should give you a solid head start I hope. Cheers
我希望这应该会给你一个坚实的开端。干杯
回答by Sjoerd
If the caret (the cursor) is somewhere in the text field, it registers in Javascript as an empty selection. That is, the selectionStart and selectionEnd attributes are the same. You can use those attributes to detect the position of the caret.
如果插入符号（光标）位于文本字段中的某个位置，它会在 Javascript 中注册为空选择。也就是说， selectionStart 和 selectionEnd 属性是相同的。您可以使用这些属性来检测插入符号的位置。
回答by Thomas Shields
Apparently selectionStart and selectionEnd are quite useful here. Check this out: http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/
显然 selectionStart 和 selectionEnd 在这里非常有用。看看这个：http: //www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/
回答by Edgar Villegas Alvarado
You can use the jQuery Caret pluginto get/set the cursor position .
Example usage:
您可以使用jQuery Caret 插件来获取/设置光标位置。
用法示例：
var cursorPosition = $("#textbox").caret().start);
You could 'store' this position like this:
你可以像这样“存储”这个位置：
$("#textbox").focusout(function(){
var cursorPosition = $(this).caret().start);
$(this).data("lastCursorPos", cursorPosition);
});
To retrieve it (on your div click event), do this:
要检索它（在您的 div 单击事件上），请执行以下操作：
var lastCursorPosition = $("#textbox").data("lastCursorPos");
Hope this helps. Cheers
希望这可以帮助。干杯
