웹 프론트엔드 JS 튜토리얼 JavaScript 또는 jQuery를 사용하여 텍스트 상자의 커서 위치에 텍스트를 삽입하려면 어떻게 해야 합니까?

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

Nov 27, 2024 pm 05:00 PM

How Can I Insert Text at the Cursor Position in a Textbox Using JavaScript or 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript로 문자열 문자를 교체하십시오

jQuery 날짜가 유효한지 확인하십시오 jQuery 날짜가 유효한지 확인하십시오 Mar 01, 2025 am 08:51 AM

jQuery 날짜가 유효한지 확인하십시오

jQuery는 요소 패딩/마진을 얻습니다 jQuery는 요소 패딩/마진을 얻습니다 Mar 01, 2025 am 08:53 AM

jQuery는 요소 패딩/마진을 얻습니다

10 JQuery Accordions 탭 10 JQuery Accordions 탭 Mar 01, 2025 am 01:34 AM

10 JQuery Accordions 탭

10 JQuery 플러그인을 확인할 가치가 있습니다 10 JQuery 플러그인을 확인할 가치가 있습니다 Mar 01, 2025 am 01:29 AM

10 JQuery 플러그인을 확인할 가치가 있습니다

노드 및 HTTP 콘솔로 HTTP 디버깅 노드 및 HTTP 콘솔로 HTTP 디버깅 Mar 01, 2025 am 01:37 AM

노드 및 HTTP 콘솔로 HTTP 디버깅

jQuery div에 스크롤 바를 추가합니다 jQuery div에 스크롤 바를 추가합니다 Mar 01, 2025 am 01:30 AM

jQuery div에 스크롤 바를 추가합니다

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

사용자 정의 Google 검색 API 설정 자습서

See all articles