在光标使用 Javascript/jquery 的地方插入文本 [英] Inserting a text where cursor is using Javascript/jquery

问题描述

我有一个包含很多文本框的页面.当有人单击链接时，我希望在光标所在的位置插入一两个单词，或附加到具有焦点的文本框.

例如，如果光标/焦点位于显示apple"的文本框上，而他单击了显示[email]"的链接，那么我希望该文本框显示apple [e-mail]".

我该怎么做?这甚至是可能的，因为如果焦点在单选/下拉/非文本框元素上怎么办?能记住最后一个关注文本框的内容吗?

解决方案

使用这个，来自 这里:

function insertAtCaret(areaId, text) {var txtarea = document.getElementById(areaId);如果(！txtarea){返回;}var scrollPos = txtarea.scrollTop;var strPos = 0;var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?"ff" : (document.selection ? "ie" : false));如果(br ==即"){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 = 正面 + 文字 + 背面；strPos = strPos + text.length;如果(br ==即"){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;">点击此处插入</a>

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.

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 [e-mail]'.

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?

解决方案

Use this, from here:

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>

这篇关于在光标使用 Javascript/jquery 的地方插入文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！