我有一个包含大量文本框的页面。当有人点击链接时，我希望将一两个单词插入光标所在的位置，或者将其附加到具有焦点的文本框。例如，如果光标/焦点位于文本框“apple”上，并且他点击了一个名为'[email]'的链接，那么我想让文本框显示'apple [email protected]'。在光标所在的位置使用Javascript插入文本/ jquery
我该怎么做？这甚至有可能，因为如果焦点放在收音机/下拉式/非文本框元素上？能记住最后关注文本框吗？
使用此，从here：
\t function insertAtCaret(areaId, text) {
\t \t var txtarea = document.getElementById(areaId);
\t \t if (!txtarea) { return; }
\t \t var scrollPos = txtarea.scrollTop;
\t \t var strPos = 0;
\t \t var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
\t \t \t "ff" : (document.selection ? "ie" : false));
\t \t if (br == "ie") {
\t \t \t txtarea.focus();
\t \t \t var range = document.selection.createRange();
\t \t \t range.moveStart ('character', -txtarea.value.length);
\t \t \t strPos = range.text.length;
\t \t } else if (br == "ff") {
\t \t \t strPos = txtarea.selectionStart;
\t \t }
\t \t var front = (txtarea.value).substring(0, strPos);
\t \t var back = (txtarea.value).substring(strPos, txtarea.value.length);
\t \t txtarea.value = front + text + back;
\t \t strPos = strPos + text.length;
\t \t if (br == "ie") {
\t \t \t txtarea.focus();
\t \t \t var ieRange = document.selection.createRange();
\t \t \t ieRange.moveStart ('character', -txtarea.value.length);
\t \t \t ieRange.moveStart ('character', strPos);
\t \t \t ieRange.moveEnd ('character', 0);
\t \t \t ieRange.select();
\t \t } else if (br == "ff") {
\t \t \t txtarea.selectionStart = strPos;
\t \t \t txtarea.selectionEnd = strPos;
\t \t \t txtarea.focus();
\t \t }
\t \t txtarea.scrollTop = scrollPos;
\t }<textarea id="textareaid"></textarea>
<a href="#" onclick="insertAtCaret('textareaid', 'text to insert');return false;">Click Here to Insert</a>我可以给你买啤酒吗？当真？ – 2013-06-04 09:01:19
wwwooooo，谢谢!!!!!!!!!!!!!!!!!!!!!!!!!!!!! – Fernando 2014-12-27 18:20:07
您只能关注所需的文本框并在其中插入文本。没有办法找出AFAIK的重点（可能在所有DOM节点上进行交互？）。
检查这个计算器 - 它为您的解决方案： How do I find out which DOM element has the focus?
我想你可以使用下面的JavaScript追踪最后聚焦的文本框：
<script>
var holdFocus;
function updateFocus(x)
{
holdFocus = x;
}
function appendTextToLastFocus(text)
{
holdFocus.value += text;
}
</script>
用法：
<input type="textbox" onfocus="updateFocus(this)" />
<a href="#" onclick="appendTextToLastFocus('textToAppend')" />
先前的解决方案（道具gclaghorn）使用文本区域，并计算光标的位置了，所以它可能是你想要的东西更好。另一方面，如果这就是你想要的，那么这个将会更轻量级。
上面的代码在IE中并不适用于我。这里的一些代码基于Insert text into textarea with jQuery
我拿出了getElementById，所以我可以用不同的方式引用元素。
function insertAtCaret(element, text) {
if (document.selection) {
element.focus();
var sel = document.selection.createRange();
sel.text = text;
element.focus();
} else if (element.selectionStart || element.selectionStart === 0) {
var startPos = element.selectionStart;
var endPos = element.selectionEnd;
var scrollTop = element.scrollTop;
element.value = element.value.substring(0, startPos) + text + element.value.substring(endPos, element.value.length);
element.focus();
element.selectionStart = startPos + text.length;
element.selectionEnd = startPos + text.length;
element.scrollTop = scrollTop;
} else {
element.value += text;
element.focus();
}
}
This jQuery plugin为您提供了选择/插入符号操作的预设方式。
如何插入一些文本通过jQuery和JavaScript的一个TextBox的当前光标位置
过程
这里我有2个文本框和一个按钮。我必须单击文本框上的某个位置，然后单击该按钮将其他文本框中的文本粘贴到上一个文本框的位置。
这里的主要问题是获取当前光标位置，我们将粘贴文本。
//Textbox on which to be pasted
<input type="text" id="txtOnWhichToBePasted" />
//Textbox from where to be pasted
<input type="text" id="txtFromWhichToBePasted" />
//Button on which click the text to be pasted
<input type="button" id="btnInsert" value="Insert"/>
<script type="text/javascript">
$(document).ready(function() {
$('#btnInsert').bind('click', function() {
var TextToBePasted = $('#txtFromWhichToBePasted').value;
var ControlOnWhichToBePasted = $('#txtOnWhichToBePasted');
//Paste the Text
PasteTag(ControlOnWhichToBePasted, TextToBePasted);
});
});
//Function Pasting The Text
function PasteTag(ControlOnWhichToBePasted,TextToBePasted) {
//Get the position where to be paste
var CaretPos = 0;
// IE Support
if (document.selection) {
ControlOnWhichToBePasted.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ControlOnWhichToBePasted.selectionStart || ControlOnWhichToBePasted.selectionStart == '0')
CaretPos = ControlOnWhichToBePasted.selectionStart;
//paste the text
var WholeString = ControlOnWhichToBePasted.value;
var txt1 = WholeString.substring(0, CaretPos);
var txt2 = WholeString.substring(CaretPos, WholeString.length);
WholeString = txt1 + TextToBePasted + txt2;
var CaretPos = txt1.length + TextToBePasted.length;
ControlOnWhichToBePasted.value = WholeString;
//update The cursor position
setCaretPosition(ControlOnWhichToBePasted, CaretPos);
}
function setCaretPosition(ControlOnWhichToBePasted, pos) {
if (ControlOnWhichToBePasted.setSelectionRange) {
ControlOnWhichToBePasted.focus();
ControlOnWhichToBePasted.setSelectionRange(pos, pos);
}
else if (ControlOnWhichToBePasted.createTextRange) {
var range = ControlOnWhichToBePasted.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
</script>
接受的答案并没有在Internet Explorer为我工作9. 我检查它和浏览器检测而不能正常工作，它检测FF（火狐）当我在IE浏览器。
我只是做了这种变化：
if ($.browser.msie)
相反的：
if (br == "ie") {
生成的代码是这一个：
function insertAtCaret(areaId,text) {
var txtarea = document.getElementById(areaId);
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
"ff" : (document.selection ? "ie" : false));
if ($.browser.msie) {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
strPos = range.text.length;
}
else if (br == "ff") strPos = txtarea.selectionStart;
var front = (txtarea.value).substring(0,strPos);
var back = (txtarea.value).substring(strPos,txtarea.value.length);
txtarea.value=front+text+back;
strPos = strPos + text.length;
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
range.moveStart ('character', strPos);
range.moveEnd ('character', 0);
range.select();
}
else if (br == "ff") {
txtarea.selectionStart = strPos;
txtarea.selectionEnd = strPos;
txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}
也许一个较短的版本，会更容易理解？
jQuery("#btn").on('click', function() {
var $txt = jQuery("#txt");
var caretPos = $txt[0].selectionStart;
var textAreaTxt = $txt.val();
var txtToAdd = "stuff";
$txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="txt" rows="15" cols="70">There is some text here.</textarea>
<input type="button" id="btn" value="OK" />我在写响应这How to add a text to a textbox from the current position of the pointer with jquery?
从乔治·克拉霍恩经批准的答案在光标位置插入简单的文本伟大的工作。如果用户选择了文本，并且希望替换文本（默认情况下为大多数文本），则需要在设置“后退”变量时进行一些小改动。另外，如果您不需要支持旧版本的IE，现代版本支持textarea.selectionStart，因此您可以取出所有浏览器检测和IE特定的代码。
这是一个简化版，至少适用于Chrome和IE11，并处理替换选定的文本。
function insertAtCaret(areaId, text) {
var txtarea = document.getElementById(areaId);
var scrollPos = txtarea.scrollTop;
var caretPos = txtarea.selectionStart;
var front = (txtarea.value).substring(0, caretPos);
var back = (txtarea.value).substring(txtarea.selectionEnd, txtarea.value.length);
txtarea.value = front + text + back;
caretPos = caretPos + text.length;
txtarea.selectionStart = caretPos;
txtarea.selectionEnd = caretPos;
txtarea.focus();
txtarea.scrollTop = scrollPos;
}
将文本添加到当前光标位置包括两个步骤：
演示：https://codepen.io/anon/pen/qZXmgN
测试Chrome 48，Firefox 45，IE 11和E DGE 25
JS：
function addTextAtCaret(textAreaId, text) {
var textArea = document.getElementById(textAreaId);
var cursorPosition = textArea.selectionStart;
addTextAtCursorPosition(textArea, cursorPosition, text);
updateCursorPosition(cursorPosition, text, textArea);
}
function addTextAtCursorPosition(textArea, cursorPosition, text) {
var front = (textArea.value).substring(0, cursorPosition);
var back = (textArea.value).substring(cursorPosition, textArea.value.length);
textArea.value = front + text + back;
}
function updateCursorPosition(cursorPosition, text, textArea) {
cursorPosition = cursorPosition + text.length;
textArea.selectionStart = cursorPosition;
textArea.selectionEnd = cursorPosition;
textArea.focus();
}
HTML：
<div>
<button type="button" onclick="addTextAtCaret('textArea','Apple')">Insert Apple!</button>
<button type="button" onclick="addTextAtCaret('textArea','Mango')">Insert Mango!</button>
<button type="button" onclick="addTextAtCaret('textArea','Orange')">Insert Orange!</button>
</div>
<textarea id="textArea" rows="20" cols="50"></textarea>
使用@quick_sliv答案：
function insertAtCaret(el, text) {
var caretPos = el.selectionStart;
var textAreaTxt = el.value;
el.value = textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos);
};
内容编辑，HTML或任何其他的DOM元素选择
如果您尝试插入<div contenteditable="true">的插入符号，这会变得更加困难，尤其是在可编辑容器中有子项的情况下。
我不得不使用瘦长库真正伟大的运气：
它有一吨的强大功能，如：
在线演示是不工作我最后一次检查，但回购已工作演示。要开始，只需从Git或NPM下载Repo，然后打开./rangy/demos/index.html
它使得使用插入符号pos和文本选择变得轻而易举！
我认为这是可能的，因为它是WYSISYG编辑的基础，怎么做，我不知道。 – 2009-06-30 14:50:16
他需要某物。不同。 – dusoft 2009-06-30 14:50:44
可能的重复[如何用javascript插入字符在插入符号？]（http://stackoverflow.com/questions/54147/how-do-i-insert-a-character-at-the-caret-with -javascript） – John 2012-06-14 13:32:04