JavaScript 또는 jQuery를 사용하여 텍스트 상자의 커서 위치에 텍스트를 삽입하려면 어떻게 해야 합니까?
Nov 27, 2024 pm 05:00 PMJavaScript/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; }
사용
이 기능을 사용하려면 다음 단계를 따르세요.
-
HTML: 다음을 사용하여 텍스트 영역 요소를 만듭니다. ID.
<textarea>
로그인 후 복사 -
JavaScript: 클릭 등 원하는 이벤트가 발생하면 insertAtCaret 함수를 호출합니다. link.
document.getElementById("myLink").addEventListener("click", function() { insertAtCaret("textareaid", "text to insert"); });
로그인 후 복사
제한 사항
이 솔루션은 강력하지만 모든 상황에서 완벽하게 작동하지는 않을 수 있다는 점에 유의하는 것이 중요합니다. 특히 텍스트 상자가 아닌 요소를 다룰 때 그렇습니다. 이 접근 방식이 귀하의 특정 요구 사항에 부합하는지 판단하는 것은 귀하의 몫입니다.
위 내용은 JavaScript 또는 jQuery를 사용하여 텍스트 상자의 커서 위치에 텍스트를 삽입하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제









