テキストの入力のキャレット位置を取得する方法はありますか？

Question

背景

私はJavaScriptでブラウザで行われたすべての入力をフィルタリングする必要があり、このようなキャプチャ段階でハンドラをアタッチすることを決めた：私は、デフォルトのアクションを防ぐため、このリスナーインサイド

window.addEventListener('keypress', keyPressListener, true); 

、フィルタリングを行い、最終的に押されたキーに関する情報を含むカスタムイベントをトリガします。 （私の最初のアプローチは、デフォルトのアクションで処理されるはずの元の（抑止された）キー押しイベントをトリガすることでした。スクリプト生成イベントは信頼できず、信頼できないイベントがChromeのデフォルトアクションを起動しないためバージョン53で）。

問題

私は今、私はこのような現在のカーソル位置を考慮したいと思う私のカスタムリスナーで入力要素を更新しようとした場合：

var caretPosition = element.selectionStart; 
element.val(newVal); 
this.setSelectionRange(cursorPosition+1, cursorPosition+1); 

これは、タイプのinput要素のために正常に動作します数値型は選択をサポートしていないので、型番号の入力要素ではテキストは使用できません。

タイプ番号の入力要素にカーソルを設定する方法（クロスブラウザと互換性があります）がありますか、この問題の別の解決方法を指摘できますか？

編集：私のkeyPressListenerはこのようになります

：上記のコードでは

var keyPressListener = function(event) { 
      //attach custom handler 
      attachInputProcessedListenerTo(event.target); 
      event.preventDefault(); 
     } 
    }; 

私はデフォルトの動作を防止し、私のフィルタは、入力を通過させる場合にトリガされますカスタムハンドラをアタッチします。あなたが見ることができるように、私はkeypressを受け取った要素にこのハンドラを自動的に付けます。

Answer 1

数字のためには、数patternでテキスト入力を使用することができます。

<form> 
 
    <input type="text" pattern="[\d\.]*"> 
 
    <button>Submit</button> 
 
</form>