chrome setSelectionRange(), oninput işleyicisinde çalışmaz

Question

Bazı otomatik tamamlama kodlarıyla çalışıyorum. setSelectionRange(), oninput olay işleyicisinde tamamlanmış olan metni seçmek için kullanılır. En azından Firefox 14'te çalışıyor, ancak Chrome'da değil (6, 17).

<input type='text' oninput='select()' /> 

function select(e){ 
    var s = this.value; 
    if (s.length) 
     this.setSelectionRange(s.length-1, s.length); 
} 

ben krom kod debug ve setSelectionRange() idam sonra bu metin ilk sağda seçildiğini çıkıyor: Sorunu gösteren

Basitleştirilmiş kod parçacığı bu gibi ama seçim daha sonra ortadan kayboldu.

ben böyle, onclick yerine oninput için işleyici bağlarsanız:

<input type='text' onclick='select()' /> 

sonra her iki tarayıcılar iyi çalışır.

Chrome'da seçim yapmak için bana bir ipucu verebilecek biri var mı?

Answer 1

select() işlevi geçirilen parametreleri yanlıştır yani o Kodunuzla ilgili bazı sorunlar vardır: thiswindow olacak ve e tanımsız olacaktır. Ayrıca, oninput öznitelikleri içinde select() işlevinin bir işlev adı olarak kullanılması, bir soruna neden olur, çünkü seçim, girdinin kendisine ait select() yöntemine giderilir. Daha iyi bir yaklaşım genellikle olay işleyicisini bir olay işleyicisi özniteliği yerine komut dosyasında ayarlamaktır. Ancak, bu sorunları düzelttikten sonra bile sorun vardır. Tarayıcı, tarayıcıyı Chrome'da hareket ettirmeden önce input olayı tetiklenir. Basit bir çözüm, bir zamanlayıcı kullanmaktır, bu alt-optimal olsa da, kullanıcının zamanlayıcı ateşlenmeden önce başka bir karakter girebilme olasılığı vardır.

Demo: http://jsfiddle.net/XXx5r/2/

Kodu:

<input type="text" oninput="selectText(this)"> 

<script type="text/javascript"> 
function selectText(input) { 
    var s = input.value; 
    if (s.length) { 
     window.setTimeout(function() { 
      input.setSelectionRange(s.length-1, s.length); 
     }, 0); 
    } 
} 
</script>