JavaScript 또는 jQuery를 사용하여 텍스트 상자의 커서 위치에 텍스트를 삽입하려면 어떻게 해야 합니까?

JavaScript/jQuery를 사용하여 커서에 텍스트 삽입

동적으로 텍스트를 텍스트 상자에 삽입해야 하는 시나리오를 접하는 것이 일반적입니다. 커서가 현재 위치해 있습니다. 웹 양식을 개발하든 대화형 인터페이스를 구축하든 이 기능은 매우 유용합니다.

다행히 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!