1

があり、<input type="number" />数字以外の文字が入力されないようにしたいです。

<input id="app-client-id" type="number" pattern="[0-9]+" />

通常のキー押下を防ぐために、これを行うことができます

const validKeys = new Set([
    'home',
    'end',
    'pageup',
    'pagedown',
    'delete',
    'backspace',
    'arrowleft',
    'arrowright',
]);

function isValidKeypress(e) {
    // numeric characters
    if (e.charCode >= 48 && e.charCode <= 57) {
        return true;
    }

    if (e.key && validKeys.has(e.key.toLowerCase())) {
        return true;
    }

    // for allowing select all, copy, and paste
    if (e.ctrlKey) {
        return true;
    }

    return false;
}

$('#app-client-id').on('keypress', isValidKeypress);

あとは、数字以外の文字の貼り付けを防止するか、理想的には数字以外の文字を除外するだけです。

function filterPastedText(e) {
    let clipboardData = e.originalEvent.clipboardData,
        text = clipboardData.getData('text').replace(/[^\d]/g, '');
    clipboardData.setData('text', text);
}

$('#app-client-id').on('paste', filterPastedText);

これは Chrome/Webkit で機能します。 ただし、Firefox では、次のエラーがスローされますsetData()。

NoModificationAllowedError: このドキュメントの変更は許可されていません

呼び出しを許可するようにブラウザに指示する方法についてのアイデアはありますsetData()か?

そのような方法が存在しない場合、フィルター処理された値を手動でinput右のカーソル位置に「貼り付ける」方法はありますか (存在する場合は選択したテキストを置き換える) 、非表示を使用しtextareaませんか? inputテキストが選択されているかどうかに関係なく、要素内のカーソルの位置を検出できません。myInput.selectionStartは常にnull。

編集

実際、呼び出しsetData()は Chrome では機能しないことがわかりました。「e」、「-」、および「.」を除くnumber非数値文字を自動的に除外するようにタイプを設定し、テストしていた文字列には、これらの文字が含まれていませんでした。呼び出しは単にサイレントに失敗します。setData()

4

1 に答える 1

0

取ることができる 1 つのアプローチは、不要な文字が入力フィールドに一時的に入力されるのを単純に許可することですが、イベントを監視oninputし、各イベントで不要な文字の入力フィールドの値を確認し、見つかった場合は入力フィールドをフィルター処理された値で更新します。その値のバージョン。

アップデート：

皮肉なことに、 .ではなくinputasを作成すると、キーボード入力を数字に制限するのが難しくなることを発見しました。なんで？数値以外の入力を使用してもすり抜ける可能性はありますが、入力フィールドの値にそれらの文字が表示されないためです。値は有効な数値であるか、空の文字列です。これにより、入力をフィルタリングして、そこにある可能性のある有効な数字を保持する機会がなくなります。type="number"type="text"type="number"

テキストフィールドを数値入力に制限しようとする私自身の試みの現在の状態でプランカーを作成しました: http://plnkr.co/edit/xsVQG1EzsDLMt8POCJUX?p=preview

于 2018-04-29T23:43:43.520 に答える