blocks|key|1516546|text|您只能将焦点放在必需的文本框中，并在其中插入文本。没有办法找出焦点在AFAIK的哪里(也许是在所有DOM节点上进行交互？)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1516547|检查此堆栈溢出-它为您提供了解决方案：How+do+I+find+out+which+DOM+element+has+the+focus?|offset|length|1516548|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/497094/how-do-i-find-out-which-javascript-element-has-focus^0|0|J|1E|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>you can only focus required textbox an insert the text there. there is no way to find out where focus is AFAIK (maybe interating over all DOM nodes?). </p>

<p>check this stackoverflow - it has a solution for you:
<a href="https://stackoverflow.com/questions/497094/how-do-i-find-out-which-javascript-element-has-focus">How do I find out which DOM element has the focus?</a></p>


blocks|key|1516570|text|使用这个，来自here|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1516571|​|1516572|function+insertAtCaret(areaId,+text)+{
++var+txtarea+=+document.getElementById(areaId);
++if+(!txtarea)+{
++++return;
++}

++var+scrollPos+=+txtarea.scrollTop;
++var+strPos+=+0;
++var+br+=+((txtarea.selectionStart+%7C%7C+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+%2B+text+%2B+back;
++strPos+=+strPos+%2B+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;
}|code-block|syntax|javascript|1516573|<textarea+id="textareaid"></textarea>
<a+href="#"+onclick="insertAtCaret('textareaid',+'text+to+insert');return+false;">Click+Here+to+Insert</a>|1516574|1516575|entityMap|0|LINK|mutability|MUTABLE|url|http://web.archive.org/web/20110102112946/http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/^0|7|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<p>Use this, from <a href="http://web.archive.org/web/20110102112946/http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/" rel="noreferrer">here</a>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea id="textareaid"&gt;&lt;/textarea&gt;
&lt;a href="#" onclick="insertAtCaret('textareaid', 'text to insert');return false;"&gt;Click Here to Insert&lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1301744|text|我认为你可以使用下面的JavaScript来跟踪最后聚焦的文本框：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1301745|<script>
var+holdFocus;

function+updateFocus(x)
{
++++holdFocus+=+x;
}

function+appendTextToLastFocus(text)
{
++++holdFocus.value+%2B=+text;
}
</script>|code-block|syntax|javascript|1301746|用法：|1301747|<input+type="textbox"+onfocus="updateFocus(this)"+/>
<a+href="#"+onclick="appendTextToLastFocus('textToAppend')"+/>|1301748|之前的解决方案(props+to+gclaghorn)使用了textarea并计算了光标的位置，因此它可能更适合您的需求。另一方面，如果这就是你要找的，这个会更轻量级。|1301749|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I think you could use the following JavaScript to track the last-focused textbox:</p>

<pre><code>&lt;script&gt;
var holdFocus;

function updateFocus(x)
{
    holdFocus = x;
}

function appendTextToLastFocus(text)
{
    holdFocus.value += text;
}
&lt;/script&gt;
</code></pre>

<p>Usage:</p>

<pre><code>&lt;input type="textbox" onfocus="updateFocus(this)" /&gt;
&lt;a href="#" onclick="appendTextToLastFocus('textToAppend')" /&gt;
</code></pre>

<p>A previous solution (props to gclaghorn) uses textarea and calculates the position of the cursor too, so it may be better for what you want. On the other hand, this one would be more lightweight, if that's what you're looking for.</p>


blocks|key|1301775|text|This+jQuery+plugin为您提供了一种预先创建的选择/插入符号操作方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1301776|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/localhost/jquery-fieldselection^0|0|I|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p><a href="https://github.com/localhost/jquery-fieldselection" rel="nofollow">This jQuery plugin</a> gives you a pre-made way of selection/caret manipulation.</p>


blocks|key|1516750|text|也许更短的版本会更容易理解？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1516751|​|1516752|++++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)+%2B+txtToAdd+%2B+textAreaTxt.substring(caretPos)+);
++++});|code-block|syntax|javascript|1516753|<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"+/>|1516754|1516755|我写这篇文章是为了回应How+to+add+a+text+to+a+textbox+from+the+current+position+of+the+pointer+with+jquery?|offset|length|1516756|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/15976574/how-to-add-a-text-to-a-textbox-from-the-current-position-of-the-pointer-with-jqu^0|0|0|0|0|0|B|2C|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@$N|13|O|14|1|15]]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

<p>Maybe a shorter version, would be easier to understand? </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    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) );
    });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;textarea id="txt" rows="15" cols="70"&gt;There is some text here.&lt;/textarea&gt;
&lt;input type="button" id="btn" value="OK" /&gt;</code></pre>
</div>
</div>
</p>

<p>I wrote this in response to <a href="https://stackoverflow.com/questions/15976574/how-to-add-a-text-to-a-textbox-from-the-current-position-of-the-pointer-with-jqu">How to add a text to a textbox from the current position of the pointer with jquery?</a></p>


blocks|key|1516829|text|George+Claghorn认可的答案对于简单地在光标位置插入文本非常有效。但是，如果用户选择了文本，而您希望替换该文本(大多数文本的默认体验)，则需要在设置'back‘变量时进行小的更改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1516830|此外，如果你不需要支持旧版本的IE，现代版本支持textarea.selectionStart，所以你可以去掉所有的浏览器检测和IE特定的代码。|1516831|这是一个简化的版本，至少适用于Chrome和IE11，并处理替换选定的文本。|1516832|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+%2B+text+%2B+back;
++++caretPos+=+caretPos+%2B+text.length;
++++txtarea.selectionStart+=+caretPos;
++++txtarea.selectionEnd+=+caretPos;
++++txtarea.focus();
++++txtarea.scrollTop+=+scrollPos;
}|code-block|syntax|javascript|1516833|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>The approved answer from George Claghorn worked great for simply inserting text at the cursor position.  If the user had selected text though, and you want that text to be replaced (the default experience with most text), you need to make a small change when setting the 'back' variable.</p>

<p>Also, if you don't need to support older versions of IE, modern versions support textarea.selectionStart, so you can take out all of the browser detection, and IE-specific code.</p>

<p>Here is a simplified version that works for Chrome and IE11 at least, and handles replacing selected text.</p>

<pre><code>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;
}
</code></pre>


blocks|key|1516841|text|使用@quick_sliv回答：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1516842|function+insertAtCaret(el,+text)+{
++++var+caretPos+=+el.selectionStart;
++++var+textAreaTxt+=+el.value;
++++el.value+=+textAreaTxt.substring(0,+caretPos)+%2B+text+%2B+textAreaTxt.substring(caretPos);
};|code-block|syntax|javascript|1516843|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>using @quick_sliv answer:</p>

<pre><code>function insertAtCaret(el, text) {
    var caretPos = el.selectionStart;
    var textAreaTxt = el.value;
    el.value = textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos);
};
</code></pre>


<p>I have a page with  a lot of textboxes. When someone clicks a link, i want a word or two to be inserted where the cursor is, or appended to the textbox which has the focus.</p>

<p>For example, if the cursor/focus is on a textbox saying 'apple' and he clicks a link saying '[email]', then i want the textbox to say, 'apple bob@example.com'.</p>

<p>How can I do this? Is this even possible, since what if the focus is on a radio/dropdown/non textbox element? Can the last focused on textbox be remembered?</p>


Inserting a text where cursor is using Javascript/jquery

我有一个有很多文本框的页面。当有人点击链接时，我希望在光标所在的位置插入一个或两个单词，或者将其附加到具有焦点的文本框中。例如，如果光标/焦点在一个文本框上，显示为'apple‘，而他点击了一个显示为'email’的链接，那么我希望文本框显示为'apple bob@example.com‘。我该怎么做呢？既然焦点在单选...

问在光标使用Javascript/jquery的位置插入文本
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在光标使用Javascript/jquery的位置插入文本EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在光标使用Javascript/jquery的位置插入文本
EN