クロムsetSelectionRange（）は、入力ハンドラでは機能しません

Question

私はいくつかの自動補完コードを扱っています。 setSelectionRange()は、oninputイベントハンドラで完了したテキストを選択するために使用されます。少なくともFirefox 14では動作しますが、Chromeでは動作しません（6,17）。私はクロームでコードをデバッグし、そしてそれがsetSelectionRange()が実行された後のテキストが最初の右で選択されていることが判明し

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

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

：問題を実証

簡素化されたコードスニペットは、このようなものですしかし、その選択は後で消えた。

私はこのように、onclick代わりのoninputにハンドラをバインドする場合：

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

、両方のブラウザでは正常に動作。

誰でもChromeで選択作業を行うためのヒントを教えてください。

Answer 1

はselect()関数に渡されたパラメータが間違っている、すなわちことを、あなたのコードに問題がありますthisはwindowなり、eは不定となります。また、oninput属性内の関数名としてselect()を使用すると、selectは入力自体のselect()メソッドに解決されるため、問題が発生します。より良いアプローチは、通常、イベントハンドラ属性を使用するのではなく、スクリプトでイベントハンドラを設定することです。

ただし、これらの問題を修正しても問題はあります。ブラウザーがChromeでキャレットを移動する前に、おそらくinputイベントが発生します。簡単な回避策は、タイマーを使用することですが、タイマーが起動する前に別のキャラクターを入力できる可能性があるため、これは最適ではありません。

デモ：http://jsfiddle.net/XXx5r/2/

コード：

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