jQuery 문자 영역의 커서 위치 설정

jQuery 문자 영역의 커서 위치 설정

jQuery를 사용하여 텍스트 필드에서 커서 위치를 설정하려면 어떻게 해야 합니까?내용이 포함된 텍스트 필드가 있는데 사용자 커서가 해당 필드에 초점을 맞출 때 특정 오프셋에 위치하도록 하고 싶습니다.코드는 다음과 같습니다.

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

set Cursor Position 함수의 실장은 어떻게 됩니까?abcdefg라는 내용을 가진 텍스트필드가 있는 경우 이 호출은 abcd**|*efg와 같이 커서가 배치됩니다.

Java에는 setCaretPosition이라는 유사한 기능이 있습니다.javascript에도 비슷한 방법이 있나요?

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

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);

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

• JsFiddle
• JsBin

다음 두 가지 기능이 있습니다.

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);

양쪽을 모두 사용한 라이브 예시textarea그리고input, 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);
}

$("#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을 지원하지 않습니다).

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();

사용하고 있습니다.http://plugins.jquery.com/project/jCaret

텍스트 영역에 텍스트를 삽입하기 전에 포커스를 설정하시겠습니까?

$("#comments").focus();
$("#comments").val(comments);

이것은 크롬으로 사용할 수 있습니다.

$('#input').focus(function() {
    setTimeout( function() {
        document.getElementById('input').selectionStart = 4;
        document.getElementById('input').selectionEnd = 4;
    }, 1);
});

1 마이크로초 이상의 지연이 필요한 것은 보통 사용자가 덮어쓸 텍스트 필드 내의 특정 위치(또는 탭을 누름)를 클릭하여 텍스트필드에 포커스를 맞추므로 사용자가 클릭한 후 위치를 변경할 때까지 기다려야 하기 때문입니다.

화살표 키를 사용하는 경우에는 함수 호출 직후에 false를 반환하는 것을 잊지 마십시오. 그렇지 않으면 Chrome은 프랙을 주름잡습니다.

{
    document.getElementById('moveto3').setSelectionRange(3,3);
    return false;
}

이 질문에 따르면 텍스트 영역에 새로운 행이 있을 때 ie와 opera에 대한 답은 완벽하게 작동하지 않습니다.set Selection Range를 호출하기 전에 selection Start, selection End를 조정하는 방법은 다음과 같습니다.

@AVProgrammer가 제안한 솔루션을 사용하여 다른 질문의 adjustOffset을 시도해보니 효과가 있습니다.

function adjustOffset(el, offset) {
    /* From https://stackoverflow.com/a/8928945/611741 */
    var val = el.value, newOffset = offset;
    if (val.indexOf("\r\n") > -1) {
        var matches = val.replace(/\r\n/g, "\n").slice(0, offset).match(/\n/g);
        newOffset += matches ? matches.length : 0;
    }
    return newOffset;
}

$.fn.setCursorPosition = function(position){
    /* From https://stackoverflow.com/a/7180862/611741 */
    if(this.lengh == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    /* From https://stackoverflow.com/a/7180862/611741 
       modified to fit https://stackoverflow.com/a/8928945/611741 */
    if(this.lengh == 0) return this;
    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();
        selectionStart = adjustOffset(input, selectionStart);
        selectionEnd = adjustOffset(input, selectionEnd);
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
}

$.fn.focusEnd = function(){
    /* From https://stackoverflow.com/a/7180862/611741 */
    this.setCursorPosition(this.val().length);
}

비트버킷에서 찾은 코드의 작은 수정

이제 코드가 시작점/종료점을 선택/강조표시할 수 있습니다(두 가지 위치가 지정되면).FF/Crome/IE9/Opera에서 테스트 및 정상적으로 동작.

$('#field').caret(1, 9);

코드는 다음과 같습니다.변경된 것은 몇 줄뿐입니다.

(function($) {
  $.fn.caret = function(pos) {
    var target = this[0];
    if (arguments.length == 0) { //get
      if (target.selectionStart) { //DOM
        var pos = target.selectionStart;
        return pos > 0 ? pos : 0;
      }
      else if (target.createTextRange) { //IE
        target.focus();
        var range = document.selection.createRange();
        if (range == null)
            return '0';
        var re = target.createTextRange();
        var rc = re.duplicate();
        re.moveToBookmark(range.getBookmark());
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
      }
      else return 0;
    }

    //set
    var pos_start = pos;
    var pos_end = pos;

    if (arguments.length > 1) {
        pos_end = arguments[1];
    }

    if (target.setSelectionRange) //DOM
      target.setSelectionRange(pos_start, pos_end);
    else if (target.createTextRange) { //IE
      var range = target.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos_end);
      range.moveStart('character', pos_start);
      range.select();
    }
  }
})(jQuery)

만족스러운 요소와 jQuery에 대해 이 작업을 진행해야 했고, 누군가가 바로 사용할 수 있도록 해야 했습니다.

$.fn.getCaret = function(n) {
    var d = $(this)[0];
    var s, r;
    r = document.createRange();
    r.selectNodeContents(d);
    s = window.getSelection();
    console.log('position: '+s.anchorOffset+' of '+s.anchorNode.textContent.length);
    return s.anchorOffset;
};

$.fn.setCaret = function(n) {
    var d = $(this)[0];
    d.focus();
    var r = document.createRange();
    var s = window.getSelection();
    r.setStart(d.childNodes[0], n);
    r.collapse(true);
    s.removeAllRanges();
    s.addRange(r);
    console.log('position: '+s.anchorOffset+' of '+s.anchorNode.textContent.length);
    return this;
};

。$(selector).getCaret()과 「」가 됩니다.$(selector).setCaret(num)을 설정합니다.Offeset은 요소에 초점을 맞춥니다.

그리고 만약 당신이 달리기를 한다면, 작은 팁도 있다.$(selector).setCaret(num)콘솔에서는 console.log가 반환되지만 콘솔 창에서 설정되므로 포커스는 표시되지 않습니다.

베스트;D

setSelectionRange가 존재하지 않는 경우 프로토타입을 직접 변경할 수 있습니다.

(function() {
    if (!HTMLInputElement.prototype.setSelectionRange) {
        HTMLInputElement.prototype.setSelectionRange = function(start, end) {
            if (this.createTextRange) {
                var range = this.createTextRange();
                this.collapse(true);
                this.moveEnd('character', end);
                this.moveStart('character', start);
                this.select();
            }
        }
    }
})();
document.getElementById("input_tag").setSelectionRange(6, 7);

jsFiddle 링크

여기에서는 커서 위치에 따라 텍스트 영역에 텍스트(탭 -> \t)를 추가하고 커서에 포커스를 저장하는 가장 쉬운 방법입니다.

$('#text').keyup(function () {
    var cursor = $('#text').prop('selectionStart');
    //if cursot is first in textarea
    if (cursor == 0) {
        //i will add tab in line
        $('#text').val('\t' + $('#text').val());
        //here we set the cursor position
        $('#text').prop('selectionEnd', 1);
    } else {
        var value = $('#text').val();
        //save the value before cursor current position
        var valToCur = value.substring(0, cursor);
        //save the value after cursor current position
        var valAfter = value.substring(cursor, value.length);
        //save the new value with added tab in text
        $('#text').val(valToCur + '\t' + valAfter);
        //set focus of cursot after insert text (1 = because I add only one symbol)
        $('#text').prop('selectionEnd', cursor + 1);
    }
});

언급URL : https://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area