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

JAVASCRIPT / 글쓴이

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에서의 사용법을 보여주는 a textarea와 a 모두를 사용한 라이브 예제 input:

코드 스 니펫 표시

2016 년 현재 Chrome, Firefox, IE11, 심지어 IE8에서도 테스트 및 작업했습니다 (마지막 참조 ; 스택 스 니펫은 IE8을 지원하지 않습니다).

답변

jQuery 솔루션은 다음과 같습니다.

$.fn.selectRange = function(start, end) {
    if(end === undefined) {
        end = start;
    }
    return this.each(function() {
        if('selectionStart' in this) {
            this.selectionStart = start;
            this.selectionEnd = end;
        } else if(this.setSelectionRange) {
            this.setSelectionRange(start, end);
        } else if(this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

이것으로 할 수 있습니다

$('#elem').selectRange(3,5); // select a range of text
$('#elem').selectRange(3); // set cursor position

답변

여기에있는 솔루션은 jQuery 확장 코드를 제외하고는 옳습니다.

확장 기능은 선택한 각 요소를 반복하고 this연결 지원으로 돌아갑니다 . 다음은 올바른 버전 : 

$.fn.setCursorPosition = function(pos) {
  this.each(function(index, elem) {
    if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  });
  return this;
};

답변

나에게 맞는 해결책을 찾았습니다.

$.fn.setCursorPosition = function(position){
    if(this.length == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    if(this.length == 0) return this;
    var input = this[0];

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

    return this;
}

$.fn.focusEnd = function(){
    this.setCursorPosition(this.val().length);
            return this;
}

이제 다음을 호출하여 포커스를 요소의 끝으로 이동할 수 있습니다.

$(element).focusEnd();

또는 위치를 지정하십시오.

$(element).setCursorPosition(3); // This will focus on the third character.

답변

이것은 Mac OSX의 Safari 5, jQuery 1.4에서 나를 위해 일했습니다.

$("Selector")[elementIx].selectionStart = desiredStartPos;
$("Selector")[elementIx].selectionEnd = desiredEndPos;

답변

나는 이것이 매우 오래된 게시물이라는 것을 알고 있지만 jQuery 만 사용하여 업데이트하는 더 간단한 솔루션을 제공해야한다고 생각했습니다.

function getTextCursorPosition(ele) {
    return ele.prop("selectionStart");
}

function setTextCursorPosition(ele,pos) {
    ele.prop("selectionStart", pos + 1);
    ele.prop("selectionEnd", pos + 1);
}

function insertNewLine(text,cursorPos) {
    var firstSlice = text.slice(0,cursorPos);
    var secondSlice = text.slice(cursorPos);

    var new_text = [firstSlice,"\n",secondSlice].join('');

    return new_text;
}

ctrl-enter를 사용하여 새 줄을 추가하는 방법 (Facebook에서와 같이) :

$('textarea').on('keypress',function(e){
    if (e.keyCode == 13 && !e.ctrlKey) {
        e.preventDefault();
        //do something special here with just pressing Enter
    }else if (e.ctrlKey){
        //If the ctrl key was pressed with the Enter key,
        //then enter a new line break into the text
        var cursorPos = getTextCursorPosition($(this));

        $(this).val(insertNewLine($(this).val(), cursorPos));
        setTextCursorPosition($(this), cursorPos);
    }
});

나는 비판을 받는다. 감사합니다.

업데이트 :이 솔루션은 정상적인 복사 및 붙여 넣기 기능이 작동하지 않도록합니다 (예 : ctrl-c, ctrl-v).이 부분이 다시 작동하도록 나중에 편집해야합니다. 그렇게하는 방법을 알고 있다면 여기에 의견을 보내 주시면 기꺼이 테스트 해 드리겠습니다. 감사.

답변

IE에서 커서를 특정 위치로 이동하면이 코드로 충분합니다.

var range = elt.createTextRange();
range.move('character', pos);
range.select();