JavaScript(テキスト入力エリア)から無効な文字を取り除くために正規表現を使用しています。私はすべてのkeyupイベントでreplace関数を実行します。ただし、これにより、キーを押すたびにカーソルがテキストボックスの最後に移動し、インライン編集が不可能になります。JavaScriptが入力フィールドの最後にジャンプするのを止めます。
ここでは、アクションである:
は、誰もがそれはそうカーソルが入力ボックスの最後にジャンプしないようにする方法を知っていますか?
JavaScript(テキスト入力エリア)から無効な文字を取り除くために正規表現を使用しています。私はすべてのkeyupイベントでreplace関数を実行します。ただし、これにより、キーを押すたびにカーソルがテキストボックスの最後に移動し、インライン編集が不可能になります。JavaScriptが入力フィールドの最後にジャンプするのを止めます。
ここでは、アクションである:
は、誰もがそれはそうカーソルが入力ボックスの最後にジャンプしないようにする方法を知っていますか?
手動でカーソルを必要な場所に戻す必要があります。 IE9の場合、.selectionStart
と.selectionEnd
(または.setSelectionRange(start, end)
を使用)を設定します。 IE8以前の場合は.createTextRange()
を使用し、テキスト範囲には.moveStart()
を呼び出してください。
W3Schoolsには、onkeypressを使用してキーをキャンセルする方法の素晴らしい例があります(例では数字をキャンセルし、必要のない文字を取り出すために正規表現を修正する能力が十分にあるようです)。 http://www.w3schools.com/jsref/event_onkeypress.asp – John
@Mike:W3Schoolsは、自分のウェブサイトを宣伝しているような人には本当に価値がありません。 http://w3fools.comを見てください - w3sの多くの情報が間違っているか、開発者の悪い習慣を促進しています。 http://quirksmode.orgやhttp://developer.mozilla.orgのように、ウェブ上にはるかに優れたリソースがあります。 –
私はw3schoolsのファンではありません:http://w3fools.com/。 – gilly3
gilly3's answerに加えて、実際のコードスニペットを見てみると便利だと思っていました。
以下の例では、selectionStart
プロパティは、JavaScript文字列操作の前にinput
要素から取得されます。その後、selectionStart
は、の操作後に初期位置に戻されます。
達成しようとする内容に応じて、selectionStart
の代わりにselectionEnd
にアクセスして、範囲:setSelectionRange(start, end)
を設定することもできます。
document.getElementById('target').addEventListener('input', function (e) {
var target = e.target,
position = target.selectionStart; // Capture initial position
target.value = target.value.replace(/\s/g, ''); // This triggers the cursor to move.
target.selectionEnd = position; // Set the cursor back to the initial position.
});
<p>The method <code>.replace()</code> will move the cursor's position, but you won't notice this.</p>
<input type="text" id="target" />
私はあなたのコードに基づいて簡単にリファクタリングする機能を持っていました。https://gist.github.com/romuleald/f1b980d5ad01b9f525e8e0244f91711a – romuleald
私は強くあなたが処理するためのより良いイベントを選択することをお勧めします。 'onkeyup'はユーザ入力を検出するのに貧弱です。 http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascriptを参照してください。 –
ここには、テキストエリアの値を置き換えるときに選択を維持する方法の完全に実現された例があります:http://stackoverflow.com/questions/3286595/update-textarea-value-but-keep-cursor-position/3288215#3288215 –