jQuery 텍스트 영역에서 커서 위치 설정

질문 : jQuery 텍스트 영역에서 커서 위치 설정

---

jQuery를 사용하여 텍스트 필드에서 커서 위치를 어떻게 설정합니까? 콘텐츠가있는 텍스트 필드가 있고 사용자가 필드에 초점을 맞출 때 특정 오프셋에 사용자 커서가 위치하기를 원합니다. 코드는 다음과 같아야합니다.

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});

setCursorPosition 함수의 구현은 어떻게 생겼습니까? 내용이 abcdefg 인 텍스트 필드가있는 경우이 호출은 커서가 abcd ** | ** efg와 같이 배치되도록합니다.

Java에는 비슷한 기능인 setCaretPosition이 있습니다. 자바 스크립트에도 비슷한 방법이 있습니까?

업데이트 : 다음과 같이 jQuery와 함께 작동하도록 CMS의 코드를 수정했습니다.

new function($) {
  $.fn.setCursorPosition = function(pos) {
    if (this.setSelectionRange) {
      this.setSelectionRange(pos, pos);
    } else if (this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      if(pos < 0) {
        pos = $(this).val().length + pos;
      }
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
}(jQuery);

답변

---

두 가지 기능이 있습니다.

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

그런 다음 다음과 같이 setCaretToPos를 사용할 수 있습니다.

setCaretToPos(document.getElementById("YOURINPUT"), 4);

jQuery의 사용을 보여주는 textarea 과 input 이 모두있는 라이브 예제 :

 

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  } else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos(input, pos) {
  setSelectionRange(input, pos, pos);
}

$("#set-textarea").click(function() {
  setCaretToPos($("#the-textarea")[0], 10)
});
$("#set-input").click(function() {
  setCaretToPos($("#the-input")[0], 10);
});

<textarea id="the-textarea" cols="40" rows="4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<br><input type="button" id="set-textarea" value="Set in textarea">
<br><input id="the-input" type="text" size="40" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
<br><input type="button" id="set-input" value="Set in input">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2016 년 현재 Chrome, Firefox, IE11, IE8에서도 테스트되고 작동합니다 (마지막 참조 , 스택 스 니펫은 IE8을 지원하지 않음).

출처 : https://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area