如何獲得textarea中的光標位置？

Question

我有一個textarea，我想知道如果我在textarea的最後一行或textarea中的第一行，並且使用javascript的光標。

我想抓住第一個換行符和最後一個換行符的位置，然後抓住光標的位置。

var firstNewline = $('#myTextarea').val().indexOf('\n'); 
var lastNewline = $('#myTextarea').val().lastIndexOf('\n'); 

var cursorPosition = ?????; 

if (cursorPosition < firstNewline) 
    // I am on first line. 
else if (cursorPosition > lastNewline) 
    // I am on last line. 

• 是否有可能搶在文本區域中的光標位置？
• 您是否有更好的建議來確定我是否在textarea的第一行或最後一行？

jQuery解決方案首選，除非JavaScript是簡單或更簡單。

任何幫助，非常感謝。

Answer 1

如果沒有選擇，您可以使用屬性.selectionStart或.selectionEnd（沒有選擇他們是平等的）。

var cursorPosition = $('#myTextarea').prop("selectionStart"); 

請注意，這不是在舊的瀏覽器支持，最明顯的是IE8-。在那裏你必須使用文本範圍，但這是一個完全的沮喪。

我相信在某個地方有一個庫，它專門用於獲取和設置輸入元素中的選擇/光標位置。我不記得它的名字，但似乎有幾十篇關於這個主題的文章。

Answer 2

這裏是一個跨瀏覽器的功能，我有我的標準庫：

function getCursorPos(input) { 
    if ("selectionStart" in input && document.activeElement == input) { 
     return { 
      start: input.selectionStart, 
      end: input.selectionEnd 
     }; 
    } 
    else if (input.createTextRange) { 
     var sel = document.selection.createRange(); 
     if (sel.parentElement() === input) { 
      var rng = input.createTextRange(); 
      rng.moveToBookmark(sel.getBookmark()); 
      for (var len = 0; 
        rng.compareEndPoints("EndToStart", rng) > 0; 
        rng.moveEnd("character", -1)) { 
       len++; 
      } 
      rng.setEndPoint("StartToStart", input.createTextRange()); 
      for (var pos = { start: 0, end: len }; 
        rng.compareEndPoints("EndToStart", rng) > 0; 
        rng.moveEnd("character", -1)) { 
       pos.start++; 
       pos.end++; 
      } 
      return pos; 
     } 
    } 
    return -1; 
} 

用它在你的代碼是這樣的：

var cursorPosition = getCursorPos($('#myTextarea')[0]) 

下面是它的互補功能：

function setCursorPos(input, start, end) { 
    if (arguments.length < 3) end = start; 
    if ("selectionStart" in input) { 
     setTimeout(function() { 
      input.selectionStart = start; 
      input.selectionEnd = end; 
     }, 1); 
    } 
    else if (input.createTextRange) { 
     var rng = input.createTextRange(); 
     rng.moveStart("character", start); 
     rng.collapse(); 
     rng.moveEnd("character", end - start); 
     rng.select(); 
    } 
} 

http://jsfiddle.net/gilly3/6SUN8/