我有一個包含大量文本框的頁面。當有人點擊鏈接時，我希望將一兩個單詞插入光標所在的位置，或者將其附加到具有焦點的文本框。例如，如果光標/焦點位於文本框「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