1. ev
  2. Soru-cevap
  3. HTML girişinde kayıt pozisyonunu aldınız mı?

HTML girişinde kayıt pozisyonunu aldınız mı?

2011-02-08 23 views

cevap

28

->selectionStart

<!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>

kaynak

2011-02-08 02:12:47 Caio

+3

çağırabilir <= 8. –

+1

Peki, dinleyici kayıtlı olması gerekir keyup ve yeni satırları (textarea) işlemez, ancak bu modern tarayıcılarda tam olarak ne istediğini yapar. – inta

4

Eski bir javascript uygulaması için böyle bir şey kullanmış, ancak bir kaç yıl içinde test etmedim:

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

kaynak

2011-02-08 02:21:29 Pandincus

+1

IE'de tutarlı 21 karakter kapalı gibi görünüyor. Bir ayarlama ile orada iyi görünüyor, ama sonra FF'de yanlış. [http://jsfiddle.net/zqNpV/](http://jsfiddle.net/zqNpV/) – stoicfury

+0

, örneğin bir krom ve bir çekicilik gibi çalışır. –

30

şu size alacak seçimin karakter endeksleri olarak başlangıcı ve bitişi. Metin girişleri ve textareas için çalışıyor ve IE'nin satır aralarındaki garip işlemlerden dolayı biraz karmaşık.

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

kaynak

2011-02-08 10:34:32

+10

Tim Down'ın verdiği her cevap denediğim ilk şey. – Justin

+0

@Tim Down Sıradan kütüphanenizi kullanarak bir cevap oluşturabilir misiniz? – Blowsie

6

an bunun için güzel bir jQuery eklentisi var: Caret plugin Sonra

sadece bu IE çalışmıyor $("#myTextBox").caret();

kaynak

2014-01-29 10:30:03

+0

Bağlantı sizin için güncellendi –

İlgili konular

 İlgili konular