1. ホーム
  2. javascript

[解決済み] Javascript/jqueryでカーソル位置のテキストを挿入する。

2022-04-22 19:50:14

質問

テキストボックスがたくさんあるページがあります。誰かがリンクをクリックすると、カーソルがある場所に単語を挿入したり、フォーカスのあるテキストボックスに追加したりしたいのです。

例えば、カーソルが「apple」というテキストボックスにあり、「[email]」というリンクをクリックした場合、テキストボックスに「apple [email protected]」と表示させたいのです。

どうすればいいのでしょうか?もしフォーカスがradio/dropdown/non textbox要素にあったらどうするのでしょうか?最後にフォーカスされたテキストボックスを記憶させることはできますか?

解決方法は?

これを使ってください。 ここで :

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>