JavaScript를 사용하여 텍스트 영역의 커서 위치에 텍스트를 삽입하는 방법은 무엇입니까?

Javascript/jQuery로 커서 위치에 텍스트 삽입

웹 개발에서 커서가 위치한 곳에 텍스트를 추가하면 사용자 경험을 향상시킬 수 있습니다. 한 가지 시나리오에는 사용자가 링크를 클릭할 때 미리 정의된 텍스트를 텍스트 상자에 원활하게 삽입하도록 허용하는 것이 포함됩니다.

커서 위치에 텍스트 삽입

커서 위치에 텍스트를 삽입하려면 다음 JavaScript 함수를 활용할 수 있습니다.

function insertAtCaret(areaId, text) {
  // Get the textarea element
  var txtarea = document.getElementById(areaId);

  // Check if the element exists
  if (!txtarea) {
    return;
  }

  // Determine the browser type (Internet Explorer or others)
  var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
    "ff" : (document.selection ? "ie" : false));

  // Calculate the cursor position
  var strPos = 0;
  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;
  }

  // Create a string that consists of the text before, after, and the inserted text
  var front = (txtarea.value).substring(0, strPos);
  var back = (txtarea.value).substring(strPos, txtarea.value.length);
  txtarea.value = front + text + back;

  // Reset the cursor position after inserting the text
  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();
  }
}

사용 예

다음 HTML 및 JavaScript 코드는 insertAtCaret() 함수를 사용하는 방법을 보여줍니다.

<textarea>

위 내용은 JavaScript를 사용하여 텍스트 영역의 커서 위치에 텍스트를 삽입하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!