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

해결법

1.나는 두 가지 기능을 가지고 있습니다 :

나는 두 가지 기능을 가지고 있습니다 :
```
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를 사용 나타내는 입력 모두 라이브 예 :

setSelectionRange 함수 (입력 지정한 selectionStart, 지정한 selectionEnd) { 경우 (input.setSelectionRange) { input.focus (); input.setSelectionRange (지정한 selectionStart, selectionEnd에); } 그렇지 않은 경우 (input.createTextRange) { VAR = input.createTextRange 범위 (); range.collapse (TRUE); range.moveEnd ( '문자', 지정한 selectionEnd); range.moveStart ( '문자', 지정한 selectionStart); range.select (); } } setCaretToPos 함수 (입력, POS) { setSelectionRange (입력, POS, POS); } $ ( "# 설정 - 텍스트 영역은"). () {(기능을 클릭 setCaretToPos ($ ( "# 더 - 텍스트 영역") [0], 10) }); $ ( "# 설정 - 입력"). () {(기능을 클릭 setCaretToPos ($ ( "# 더 - 입력") [0], 10); }); <텍스트 영역 ID = "더 - 텍스트 영역"COLS = "40"행 = "4"> 로렘 입숨 당근 학부 현상을 개선하지만, 이러한 노동 및 비만, 시간 활력 occaecat 할. 수년에 걸쳐, 그래서, nostrud 그녀의 운동의 장점을 aliquip 누가 올 것이다 자극 노력 학군과 장수 경우. cupidatat의 cillum에 통증이 도망 음주 운전 등 dolore 마그나에서 비판을 받아왔다되고 싶어하는 것은 어떤 결과 기쁨을 생성하지 않습니다. Excepteur하지 excepteur cupidatat 흑인있는 것은 부드러운 마음이 노력을 포기하는 것입니다 이러한 서비스에 대한 책임이 있습니다. 참고 문헌 : 크로스 <입력 식의 "입력"TYPE = "텍스트"사이즈 = "40"값 = "로렘 입숨 당근 향상 학부 현상"> 참고 문헌 : <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

2016 년 현재로, 테스트 및 크롬, 파이어 폭스, IE11, 심지어 IE8 작업 (여기 마지막 참조; 스택 조각이 IE8을 지원하지 않습니다).

2.다음은 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

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

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

확장 기능은 각각의 선택된 엘리먼트를 반복하고지지 체인이를 반환한다. 여기에 올바른 버전입니다 :

$.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;
};

4.나는 나를 위해 작동하는 솔루션을 발견 :

나는 나를 위해 작동하는 솔루션을 발견 :

$.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.

5.이것은 맥 OSX, jQuery를 1.4에 사파리 5에 나를 위해 일한 :

이것은 맥 OSX, jQuery를 1.4에 사파리 5에 나를 위해 일한 :
```
$("Selector")[elementIx].selectionStart = desiredStartPos; 
$("Selector")[elementIx].selectionEnd = desiredEndPos;
```

6.나는 이것이 아주 오래된 게시물입니다 실현, 그러나 나는 아마 단지 jQuery를 사용하여 업데이트 할 수있는 간단한 솔루션을 제공해야한다고 생각했다.

나는 이것이 아주 오래된 게시물입니다 실현, 그러나 나는 아마 단지 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 키를 입력 :

$('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) 확실 부분이 다시 작동하는지 확인하기 위해 미래의 편집이있을 것이다, 그래서. 당신이 수행하는 방법 아이디어가 있다면, 여기에 언급, 나는 그것을 테스트 드리겠습니다. 감사.

7.IE에서이 코드는 충분 어떤 위치에 커서를 이동합니다 :

IE에서이 코드는 충분 어떤 위치에 커서를 이동합니다 :
```
var range = elt.createTextRange();
range.move('character', pos);
range.select();
```
8.내가 이것을 사용하고 있습니다 : http://plugins.jquery.com/project/jCaret

내가 이것을 사용하고 있습니다 : http://plugins.jquery.com/project/jCaret
9.당신이 이렇게 텍스트 영역에 텍스트를 삽입하기 전에 초점을 설정?

당신이 이렇게 텍스트 영역에 텍스트를 삽입하기 전에 초점을 설정?
```
$("#comments").focus();
$("#comments").val(comments);
```
10.이 크롬에 나를 위해 작동

이 크롬에 나를 위해 작동
```
$('#input').focus(function() {
    setTimeout( function() {
        document.getElementById('input').selectionStart = 4;
        document.getElementById('input').selectionEnd = 4;
    }, 1);
});
```
분명히 당신은 마이크로 초 이상의 지연 시간을 필요로하기 때문에 당신이 위치가 될 때까지 기다릴 필요가 있도록, 오버라이드 (override) 할 텍스트 필드에 어떤 위치에서 클릭 (또는 탭을 쳐서) 텍스트 필드에 일반적으로 사용자 집중한다 사용자의 클릭으로 설정 한 다음 변경합니다.
11.그냥 크롬 그렇지 않으면 frack을 fricks 이후 화살표 키를 사용하는 경우 함수 호출 후 거짓 권리를 반환해야합니다.

그냥 크롬 그렇지 않으면 frack을 fricks 이후 화살표 키를 사용하는 경우 함수 호출 후 거짓 권리를 반환해야합니다.
```
{
    document.getElementById('moveto3').setSelectionRange(3,3);
    return false;
}
```

12.텍스트 영역에서 새로운 라인이있을 때이 질문을 바탕으로, 대답은 IE와 오페라 완벽하게 작동하지 않습니다. 대답은 setSelectionRange를 호출하기 전에 지정한 selectionStart, 지정한 selectionEnd을 조정하는 방법을 설명합니다.

텍스트 영역에서 새로운 라인이있을 때이 질문을 바탕으로, 대답은 IE와 오페라 완벽하게 작동하지 않습니다. 대답은 setSelectionRange를 호출하기 전에 지정한 selectionStart, 지정한 selectionEnd을 조정하는 방법을 설명합니다.

나는 @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);
}

13.내가의 bitbucket에있는 코드에 작은 수정

내가의 bitbucket에있는 코드에 작은 수정

이 개 위치를 제공하는 경우 코드는 이제 시작 / 끝 포인트 / 강조를 선택할 수 있습니다. 테스트 및 FF / 크롬 / IE9 / 오페라에서 잘 작동합니다.

$('#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)

14.나는의 contentEditable 요소와 jQuery를하고 생각을 누군가가 준비가 사용할 수있는이 작업을해야했다 :

나는의 contentEditable 요소와 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;
};
```
사용 $ (선택) .getCaret는 () 수는 오프셋 및 $ (선택) .setCaret (NUM)는 offeset을 설정하고 세트 요소에 초점을 반환합니다.

콘솔에서 또한 작은 팁을 실행할 경우 $ (선택)은 .set 캐럿 (수) 그것은을 console.log를 반환하지만이 콘솔 창에 설정되어 있기 때문에 당신은 초점을 시각화 할 수 없습니다.

Bests; D

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

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 링크

16.나를 여기에 관해서는 가장 쉽게 방법 (탭 -> \ t) 텍스트를 추가하려면 커서 위치로 커서에 초점을 저장 텍스트 영역에서 :

나를 여기에 관해서는 가장 쉽게 방법 (탭 -> \ 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);
    }
});

from https://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 부트 스트랩 모달로 데이터를 전달 (0)	2020.09.23
[JQUERY] 로딩 후에 동적 HTML 클릭 이벤트를 추가 jQuery를 .live () CSTE 연구진 VS () 메소드 (0)	2020.09.23
[JQUERY] 요소가 jQuery를에 숨겨져 있는지 어떻게 확인합니까? (0)	2020.09.23
[JQUERY] jQuery를에 이벤트 처리기를 제거하는 가장 좋은 방법은? (0)	2020.09.23
[JQUERY] jQuery를 사용하여 하이퍼 링크의 HREF를 변경하는 방법 (0)	2020.09.23

복붙노트

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

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

해결법

1.나는 두 가지 기능을 가지고 있습니다 :

2.다음은 jQuery를 솔루션입니다 :

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

4.나는 나를 위해 작동하는 솔루션을 발견 :

5.이것은 맥 OSX, jQuery를 1.4에 사파리 5에 나를 위해 일한 :

6.나는 이것이 아주 오래된 게시물입니다 실현, 그러나 나는 아마 단지 jQuery를 사용하여 업데이트 할 수있는 간단한 솔루션을 제공해야한다고 생각했다.

7.IE에서이 코드는 충분 어떤 위치에 커서를 이동합니다 :

8.내가 이것을 사용하고 있습니다 : http://plugins.jquery.com/project/jCaret

9.당신이 이렇게 텍스트 영역에 텍스트를 삽입하기 전에 초점을 설정?

10.이 크롬에 나를 위해 작동

11.그냥 크롬 그렇지 않으면 frack을 fricks 이후 화살표 키를 사용하는 경우 함수 호출 후 거짓 권리를 반환해야합니다.

12.텍스트 영역에서 새로운 라인이있을 때이 질문을 바탕으로, 대답은 IE와 오페라 완벽하게 작동하지 않습니다. 대답은 setSelectionRange를 호출하기 전에 지정한 selectionStart, 지정한 selectionEnd을 조정하는 방법을 설명합니다.

13.내가의 bitbucket에있는 코드에 작은 수정

14.나는의 contentEditable 요소와 jQuery를하고 생각을 누군가가 준비가 사용할 수있는이 작업을해야했다 :

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

16.나를 여기에 관해서는 가장 쉽게 방법 (탭 -> \ t) 텍스트를 추가하려면 커서 위치로 커서에 초점을 저장 텍스트 영역에서 :

'JQUERY' 카테고리의 다른 글

티스토리툴바