在光标所在的位置使用Javascript / jquery插入文本
我有一个很多文本框的页面。 当有人点击一个链接时，我想插入一两个单词插入光标所在的位置，或者附加到具有焦点的文本框。
例如，如果光标/焦点位于文本框“苹果”上，并且他点击了一个名为“[email]”的链接，那么我想让文本框显示“apple bob@example.com”。
我该怎么做？ 这甚至是可能的，因为如果重点放在收音机/下拉式/非文本框元素上呢？ 上一次关注文本框可以记住吗？
使用这个，从这里 ：
function insertAtCaret(areaId, text) { var txtarea = document.getElementById(areaId); if (!txtarea) { return; } var scrollPos = txtarea.scrollTop; var strPos = 0; var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false ) ); if (br == "ie") { 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 ieRange = document.selection.createRange(); ieRange.moveStart ('character', -txtarea.value.length); ieRange.moveStart ('character', strPos); ieRange.moveEnd ('character', 0); ieRange.select(); } else if (br == "ff") { txtarea.selectionStart = strPos; txtarea.selectionEnd = strPos; txtarea.focus(); } txtarea.scrollTop = scrollPos; } <textarea id="textareaid"></textarea> <a href="#" onclick="insertAtCaret('textareaid', 'text to insert');return false;">Click Here to Insert</a>
也许更短的版本，会更容易理解？
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" />
乔治·克拉格霍恩（George Claghorn）的批准答案在光标处插入文本非常有效。 如果用户select了文本，并且想要replace文本（默认情况下大多数文本），则需要在设置“后退”variables时进行一些小改动。
另外，如果你不需要支持IE的老版本，现代版本支持textarea.selectionStart，所以你可以取出所有的浏览器检测和IE特定的代码。
这是一个简化的版本，至less适用于Chrome和IE11，并处理replace选定的文本。
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; }
上面的代码在IE中并不适用于我。 这里有一些基于jQuery插入文本到textarea的代码
我拿出了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(); } }
如何通过JQuery和JavaScript插入一些文本到TextBox的当前光标位置
处理
- find当前光标位置
- 获取要复制的文本
- 在那里设置文本
- 更新光标位置
在这里我有2个文本框和一个button。 我必须单击文本框上的某个位置，然后单击button将文本从其他文本框粘贴到上一个文本框的位置。
这里的主要问题是获取当前的光标位置，我们将粘贴文本。
//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>
我想你可以使用下面的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')" />
以前的解决scheme（道具到gclaghorn）使用textarea，并计算光标的位置，所以它可能会更好，你想要什么。 另一方面，如果这就是你想要的，那么这个将会更加轻量级。
添加文本到当前的光标位置涉及两个步骤：
- 在当前光标位置添加文本
- 更新当前的光标位置
演示： https : //codepen.io/anon/pen/qZXmgN
在Chrome 48，Firefox 45，IE 11和Edge 25中testing
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>
在Internet Explorer 9上，我接受的答案并不适用于我。我检查了它，并且浏览器检测function无法正常工作，当我在Internet Explorer时检测到ff （firefox）。
我只是做了这个改变：
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插件为您提供了一个select/插入符号操作的预设方法。
使用@quick_sliv回答：
function insertAtCaret(el, text) { var caretPos = el.selectionStart; var textAreaTxt = el.value; el.value = textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos); };
你只能把焦点放在需要的文本框里面插入文本。 没有办法找出焦点是AFAIK（也许在所有的DOM节点上进行交互？）。
检查这个stackoverflow – 它有一个解决scheme为您： 如何找出哪个DOM元素的重点？
内容可编辑，HTML或任何其他DOM元素select
如果您试图在<div contenteditable="true">插入插入符号，这变得更加困难，尤其是如果有可编辑容器中的子项。
我使用Rangy图书馆的运气非常好：
- GIT： https ： //github.com/timdown/rangy
- NPM： https ： //www.npmjs.com/package/rangy
它有很多很棒的function，例如：
- 保存位置或select
- 之后，还原位置或select
- 获取selectHTML或明文
- 等等
在线演示最后我没有检查，但回购有工作演示。 要开始，只需从Git或NPM下载Repo，然后打开./rangy/demos/index.html
它使工作与插入符号和文本select轻而易举！
