Làm thế nào để bạn có được vị trí con trỏ trong một vùng văn bản?

Question

Tôi có một vùng văn bản và tôi muốn biết nếu tôi ở dòng cuối cùng trong vùng văn bản hoặc dòng đầu tiên trong vùng văn bản với con trỏ của tôi có javascript.

Tôi đã nghĩ đến việc lấy vị trí của ký tự dòng mới đầu tiên và ký tự dòng mới cuối cùng và sau đó nắm lấy vị trí của con trỏ.

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. 

• Có thể lấy vị trí con trỏ trong textarea?
• Bạn có đề xuất tốt hơn để tìm hiểu xem tôi có đang ở dòng đầu tiên hoặc dòng cuối cùng của vùng văn bản không?

Các giải pháp jQuery được ưu tiên trừ khi javascript đơn giản hoặc đơn giản hơn.

Bất kỳ trợ giúp nào được đánh giá cao.

Answer 1

Nếu không có lựa chọn nào, bạn có thể sử dụng các thuộc tính .selectionStart hoặc .selectionEnd (không có lựa chọn nào bằng nhau).

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

Lưu ý rằng điều này không được hỗ trợ trong các trình duyệt cũ, đáng chú ý nhất là IE8-. Ở đó bạn sẽ phải làm việc với các phạm vi văn bản, nhưng đó là một sự thất vọng hoàn toàn.

Tôi tin rằng có một thư viện ở đâu đó được dành riêng để nhận và thiết lập các vị trí lựa chọn/con trỏ trong các yếu tố đầu vào. Tôi không thể nhớ tên của nó, nhưng dường như có hàng chục bài viết về chủ đề này.

Answer 2

Dưới đây là một chức năng trình duyệt chéo tôi có trong thư viện chuẩn của tôi:

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

Sử dụng nó trong mã của bạn như thế này:

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

Dưới đây là chức năng bổ sung của nó:

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/