텍스트 입력 필드 내에서 (문자) 커서의 위치를 가져옵니다

해결법

1.쉽게 업데이트 :

쉽게 업데이트 :

이 답변에 field.selectionStart 예를 사용합니다.

이 문제를 지적 @commonSenseCode 감사합니다.

올드 대답 :

이 솔루션을 발견. 하지 않음 JQuery와 기반하지만, JQuery와에 통합하는 문제가 없습니다 :

/*
** Returns the caret (cursor) position of the specified text field (oField).
** Return value range is 0-oField.value.length.
*/
function doGetCaretPosition (oField) {

  // Initialize
  var iCaretPos = 0;

  // IE Support
  if (document.selection) {

    // Set focus on the element
    oField.focus();

    // To get cursor position, get empty selection range
    var oSel = document.selection.createRange();

    // Move selection start to 0 position
    oSel.moveStart('character', -oField.value.length);

    // The caret position is selection length
    iCaretPos = oSel.text.length;
  }

  // Firefox support
  else if (oField.selectionStart || oField.selectionStart == '0')
    iCaretPos = oField.selectionDirection=='backward' ? oField.selectionStart : oField.selectionEnd;

  // Return results
  return iCaretPos;
}

2.좋은 일, 최대에 큰 감사를드립니다.

좋은 일, 최대에 큰 감사를드립니다.

사람이 그것을 사용하려는 경우 내가 jQuery를에 그의 대답에 기능을 포장했습니다.

(function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } else if (document.selection) {
            // IE
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            return sel.text.length - selLen;
        }
    }
})(jQuery);

3.사용 지정한 selectionStart, 그것은 모든 주요 브라우저와 호환됩니다.

사용 지정한 selectionStart, 그것은 모든 주요 브라우저와 호환됩니다.

document.getElementById를 ( '는 foobar').하여 addEventListener ( '의 keyup', E => { 을 console.log ( '에서 캐럿', e.target.selectionStart) }) <입력 ID = "는 foobar"/>

업데이트 :이 어떤 유형이 유형 = 입력에 "텍스트"또는 정의되지 않은 경우에만 작동합니다.

4.아주 간단한 해결책을 얻었다. 검증에서 그 결과 다음과 같은 코드를 사용해보십시오

아주 간단한 해결책을 얻었다. 검증에서 그 결과 다음과 같은 코드를 사용해보십시오

<html>
<head>
<script>
    function f1(el) {
    var val = el.value;
    alert(val.slice(0, el.selectionStart).length);
}
</script>
</head>
<body>
<input type=text id=t1 value=abcd>
    <button onclick="f1(document.getElementById('t1'))">check position</button>
</body>
</html>

나는 당신에게 fiddle_demo를주는거야

5.이것에 대한 좋은 플러그인은 지금이 : 캐럿 플러그인

이것에 대한 좋은 플러그인은 지금이 : 캐럿 플러그인

그런 다음 사용하여 위치를 얻을 수 있습니다 $ ( "#의합니다 MyTextBox"). 캐럿 () 또는 $를 통해 그것을 설정 ( "#의합니다 MyTextBox"). 캐럿 (위치)

6.

   (function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if (document.selection) {
            // IE
           input.focus();
        }
        return 'selectionStart' in input ? input.selectionStart:'' || Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
     }
   })(jQuery);

7.이 몇 가지 좋은 답변이 여기에 게시,하지만 난 당신이 당신의 코드를 단순화하고 inputElement.selectionStart 지원을위한 검사를 건너 뛸 수 있다고 생각 : 그것은 IE8에서만 지원되지 않고 이전 (설명서 참조) 현재 브라우저의 1 % 미만을 나타냅니다 용법.

이 몇 가지 좋은 답변이 여기에 게시,하지만 난 당신이 당신의 코드를 단순화하고 inputElement.selectionStart 지원을위한 검사를 건너 뛸 수 있다고 생각 : 그것은 IE8에서만 지원되지 않고 이전 (설명서 참조) 현재 브라우저의 1 % 미만을 나타냅니다 용법.
```
var input = document.getElementById('myinput'); // or $('#myinput')[0]
var caretPos = input.selectionStart;

// and if you want to know if there is a selection or not inside your input:

if (input.selectionStart != input.selectionEnd)
{
    var selectionValue =
    input.value.substring(input.selectionStart, input.selectionEnd);
}
```
8.아마 당신은 커서 위치에 추가하여 선택 범위를해야합니다. 여기에 당신도 jQuery를하지 않아도, 간단한 함수입니다 :

아마 당신은 커서 위치에 추가하여 선택 범위를해야합니다. 여기에 당신도 jQuery를하지 않아도, 간단한 함수입니다 :
```
function caretPosition(input) {
    var start = input[0].selectionStart,
        end = input[0].selectionEnd,
        diff = end - start;

    if (start >= 0 && start == end) {
        // do cursor position actions, example:
        console.log('Cursor Position: ' + start);
    } else if (start >= 0) {
        // do ranged select actions, example:
        console.log('Cursor Position: ' + start + ' to ' + end + ' (' + diff + ' selected chars)');
    }
}
```
하자 그것을 변경하거나 위치에 커서가 마우스 이동 때마다 입력에 전화 싶은 말 (우리의 jQuery CSTE 연구진를 (사용이 경우)). 성능상의 이유로,이 이벤트가 쏟아져 경우 좋은 생각) 밑줄의 _debounce (같은에서는 setTimeout () 또는 무언가를 추가 할 수 있습니다 :
```
$('input[type="text"]').on('keyup mouseup mouseleave', function() {
    caretPosition($(this));
});
```
당신이 그것을 밖으로 시도 싶다면 여기 바이올린은 다음과 같습니다 https://jsfiddle.net/Dhaupin/91189tq7/
9.const를 INPT = document.getElementById를 ( "텍스트 상자"); const를 INPC = document.getElementById를 ( "텍스트 박스 내용"); // swch는 입력을 가져옵니다. var에 swch; // corsur가 defaulte 입력에 활성화되어 거짓 swch합니다. VAR isSelect 거짓 =; var에 crnselect; // 초점 함수 setSwitch (E) { swch = E; isSelect 사실 =; 을 console.log ( "설정 스위치 :"+ isSelect); } // 클릭 EV에 setEmoji 함수 () { 경우 (isSelect) { CONSOLE.LOG는 ( "이모티콘 추가 :"); swch.value + = ":)"; swch.setSelectionRange (2,2); isSelect 사실 =; } } //에 입력을 선택하지. onout 함수 () { // الافنت اون كي اب crnselect = inpC.selectionStart; // 반환 입력은 200 밀리 초 후 활성화되지 선택합니다. VAR LEN = swch.value.length; 에서는 setTimeout (() => { (LEN == swch.value.length)? isSelect은 false = : isSelect = 사실을; }, 200); } 을보십시오! <버튼의 onclick = "setEmoji ()"> emogi :

const를 INPT = document.getElementById를 ( "텍스트 상자"); const를 INPC = document.getElementById를 ( "텍스트 박스 내용"); // swch는 입력을 가져옵니다. var에 swch; // corsur가 defaulte 입력에 활성화되어 거짓 swch합니다. VAR isSelect 거짓 =; var에 crnselect; // 초점 함수 setSwitch (E) { swch = E; isSelect 사실 =; 을 console.log ( "설정 스위치 :"+ isSelect); } // 클릭 EV에 setEmoji 함수 () { 경우 (isSelect) { CONSOLE.LOG는 ( "이모티콘 추가 :"); swch.value + = ":)"; swch.setSelectionRange (2,2); isSelect 사실 =; } } //에 입력을 선택하지. onout 함수 () { // الافنت اون كي اب crnselect = inpC.selectionStart; // 반환 입력은 200 밀리 초 후 활성화되지 선택합니다. VAR LEN = swch.value.length; 에서는 setTimeout (() => { (LEN == swch.value.length)? isSelect은 false = : isSelect = 사실을; }, 200); } 을보십시오! <버튼의 onclick = "setEmoji ()"> emogi :

from https://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 $ .ready와 UpdatePanels (문서)? (0)	2020.09.26
[JQUERY] jQuery로 단어를 강조 (0)	2020.09.25
[JQUERY] jQuery를에 큐은 무엇입니까? (0)	2020.09.25
[JQUERY] 관리 jQuery를 플러그인 의존성에 웹팩 (0)	2020.09.25
[JQUERY] 상위 이벤트를 트리거 JQuery와 정지 아이 (0)	2020.09.25

복붙노트

[JQUERY] 텍스트 입력 필드 내에서 (문자) 커서의 위치를 가져옵니다

텍스트 입력 필드 내에서 (문자) 커서의 위치를 가져옵니다

해결법

1.쉽게 업데이트 :

2.좋은 일, 최대에 큰 감사를드립니다.

3.사용 지정한 selectionStart, 그것은 모든 주요 브라우저와 호환됩니다.

4.아주 간단한 해결책을 얻었다. 검증에서 그 결과 다음과 같은 코드를 사용해보십시오

5.이것에 대한 좋은 플러그인은 지금이 : 캐럿 플러그인

6.

8.아마 당신은 커서 위치에 추가하여 선택 범위를해야합니다. 여기에 당신도 jQuery를하지 않아도, 간단한 함수입니다 :

'JQUERY' 카테고리의 다른 글

티스토리툴바

텍스트 입력 필드 내에서 (문자) 커서의 위치를 ​​가져옵니다

해결법

1.쉽게 업데이트 :

2.좋은 일, 최대에 큰 감사를드립니다.

3.사용 지정한 selectionStart, 그것은 모든 주요 브라우저와 호환됩니다.

4.아주 간단한 해결책을 얻었다. 검증에서 그 결과 다음과 같은 코드를 사용해보십시오

5.이것에 대한 좋은 플러그인은 지금이 : 캐럿 플러그인

6.

8.아마 당신은 커서 위치에 추가하여 선택 범위를해야합니다. 여기에 당신도 jQuery를하지 않아도, 간단한 함수입니다 :

'JQUERY' 카테고리의 다른 글

티스토리툴바

텍스트 입력 필드 내에서 (문자) 커서의 위치를 가져옵니다