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

まあし、リスナーが登録されなければなりませんキー入力時には新しい行（textarea）は処理されませんが、これは最新のブラウザで求められていたこととまったく同じです。 – inta

4

我々は古いjavascriptのアプリケーションのために、このようなものを使用していたが、私は数年でそれをテストしていない：

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とchromeの魅力のように機能します。 –

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

私が試したのはティムダウンの答えです。 – Justin

+0

@Tim Downランジーライブラリを使用して回答を作成できますか？ – Blowsie

6

は今、このための素晴らしいjQueryプラグインがあります：Caret pluginその後

あなただけのこれはIEでは動作しません$("#myTextBox").caret();

出典

2014-01-29 10:30:03

+0

あなたのためのリンクを更新しました –

HTML入力のキャレット位置を取得しますか？

答えて

関連する問題