HTML 입력에서 캐럿 위치 가져 오기?

28

<!doctype html> 

<html> 
    <head> 
     <meta charset = "utf-8"> 

     <script type = "text/javascript"> 
      window.addEventListener ("load", function() { 
       var input = document.getElementsByTagName ("input"); 

       input[0].addEventListener ("keydown", function() { 
        alert ("Caret position: " + this.selectionStart); 

        // You can also set the caret: this.selectionStart = 2; 
       }); 
      }); 
     </script> 

     <title>Test</title> 
    </head> 

    <body> 
     <input type = "text"> 
    </body> 
</html>

출처

2011-02-08 02:12:47 Caio

+3

호출 할 수 있습니다 <= 8 –

+1

글쎄, 리스너가 등록되어 있어야합니다 keyup에서 새로운 줄 (textarea)을 처리하지는 않지만, 이것은 현대의 브라우저에서 요구되는 것과 정확히 일치합니다. – inta

4

우리는 오래된 자바 스크립트 응용 프로그램에 대한이 같은 것을 사용했다,하지만 난 몇 년 동안 그것을 테스트하지 않은이 :

function getCaretPos(input) { 
    // Internet Explorer Caret Position (TextArea) 
    if (document.selection && document.selection.createRange) { 
     var range = document.selection.createRange(); 
     var bookmark = range.getBookmark(); 
     var caret_pos = bookmark.charCodeAt(2) - 2; 
    } else { 
     // Firefox Caret Position (TextArea) 
     if (input.setSelectionRange) 
      var caret_pos = input.selectionStart; 
    } 

    return caret_pos; 
}

출처

2011-02-08 02:21:29 Pandincus

+1

IE에서 일관된 21 자로 보입니다. 조정이 잘된 것처럼 보이지만 FF에서는 부정확합니다. [http://jsfiddle.net/zqNpV/](http://jsfiddle.net/zqNpV/) – stoicfury

+0

은 ie와 크롬의 매력처럼 작동합니다. –

30

다음은 당신이 얻을 것이다 선택의 선두와 종점을 문자 인덱스로서 돌려줍니다. 텍스트 입력 및 텍스트 영역에서 작동하며 IE의 줄 바꿈 처리 때문에 약간 복잡합니다.

function getInputSelection(el) { 
    var start = 0, end = 0, normalizedValue, range, 
     textInputRange, len, endRange; 

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { 
     start = el.selectionStart; 
     end = el.selectionEnd; 
    } else { 
     range = document.selection.createRange(); 

     if (range && range.parentElement() == el) { 
      len = el.value.length; 
      normalizedValue = el.value.replace(/\r\n/g, "\n"); 

      // Create a working TextRange that lives only in the input 
      textInputRange = el.createTextRange(); 
      textInputRange.moveToBookmark(range.getBookmark()); 

      // Check if the start and end of the selection are at the very end 
      // of the input, since moveStart/moveEnd doesn't return what we want 
      // in those cases 
      endRange = el.createTextRange(); 
      endRange.collapse(false); 

      if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) { 
       start = end = len; 
      } else { 
       start = -textInputRange.moveStart("character", -len); 
       start += normalizedValue.slice(0, start).split("\n").length - 1; 

       if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) { 
        end = len; 
       } else { 
        end = -textInputRange.moveEnd("character", -len); 
        end += normalizedValue.slice(0, end).split("\n").length - 1; 
       } 
      } 
     } 
    } 

    return { 
     start: start, 
     end: end 
    }; 
} 

var textBox = document.getElementById("textBoxId"); 
textBox.focus(); 
alert(getInputSelection(textBox).start);

출처

2011-02-08 10:34:32

+10

Tim Down의 답변은 제가 처음 시도한 것입니다. – Justin

+0

@Tim Down 랭킹 라이브러리를 사용하여 답변을 만들 수 있습니까? – Blowsie

6

지금 이것에 대한 좋은 jQuery 플러그인이 : Caret plugin 다음

그냥이 IE에서 작동하지 않습니다 $("#myTextBox").caret();

출처

2014-01-29 10:30:03

+0

링크가 업데이트되었습니다. –

HTML 입력에서 캐럿 위치 가져 오기?

답변

관련 문제