JavaScript または jQuery を使用してテキストボックスのカーソル位置にテキストを挿入するにはどうすればよいですか?

JavaScript/jQuery を使用したカーソル位置へのテキストの挿入

テキストボックスにテキストを動的に挿入する必要があるシナリオがよくあります。カーソルは現在位置しています。 Web フォームを開発している場合でも、対話型インターフェイスを構築している場合でも、この機能は非常に貴重です。

ありがたいことに、JavaScript または jQuery を利用すると、テキストボックス以外の要素内であっても、カーソル位置にテキストを簡単に挿入できます。その方法は次のとおりです:

JavaScript ソリューション

信頼できるソースから改変された次の JavaScript 関数を使用すると、任意のテキストのカーソル位置にテキストを挿入できます。エリア:

function insertAtCaret(areaId, text) {
  // Retrieve the text area element
  var txtarea = document.getElementById(areaId);
  if (!txtarea) {
    return;
  }

  // Save the current scroll position
  var scrollPos = txtarea.scrollTop;

  // Determine the cursor position based on browser support
  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;
  }

  // Split the text area value into front and back parts
  var front = (txtarea.value).substring(0, strPos);
  var back = (txtarea.value).substring(strPos, txtarea.value.length);

  // Insert the text into the cursor position
  txtarea.value = front + text + back;
  strPos = strPos + text.length;

  // Update the cursor position based on browser support
  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();
  }

  // Restore the scroll position
  txtarea.scrollTop = scrollPos;
}

使用法

この機能を使用するには、次の手順に従います:

1. HTML: を使用してテキストエリア要素を作成します。 ID.

   <textarea>

2. JavaScript: 目的のイベントが発生したときに、insertAtCaret 関数を呼び出します。 link.

   document.getElementById("myLink").addEventListener("click", function() {
     insertAtCaret("textareaid", "text to insert");
   });

制限事項

このソリューションは堅牢ですが、すべての状況で完璧に機能するとは限らないことに注意することが重要です。特に非テキストボックス要素を扱う場合。このアプローチが特定の要件に適合するかどうかを判断するのはあなた次第です。

以上がJavaScript または jQuery を使用してテキストボックスのカーソル位置にテキストを挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。