0

input type='text' 要素の検証を行っています。「貼り付け」イベントと「キーダウン」イベントを配線して、入力をトラップし、数字だけに制限しました。キーダウンは問題なく機能するようですが、実際にテキストをフィールドに貼り付けないようにするブラウザはありませんでした(チケットである可能性のあるbeforepasteイベントがあることがわかります-しかし、それは表示されます最終的に、値が数値でない場合、入力を空白にするだけになりました.これにより、瞬間的なちらつきが発生しますが、機能しているようです.

これを行うためのよりクリーンな方法はありますか?何か不足していますか?ちらつきを防ぐ方法はありますか?HTML5 に type='number' があることは知っていますが、まだそこに行く準備ができていません。

<input type="text" id="number" />

<script type="text/javascript">
    $(document).ready(function () {

        enableNumericOnlyEntry("#number");

        function enableNumericOnlyEntry(object) {
            $(object).bind('paste', numericOnlyPaste);
            $(object).bind('keydown', null, numericOnlyKeyDown);

            function numericOnlyPaste(event) {
                var inputText = "";
                var element = event.target;
                setTimeout(function () {
                    var text = $(element).val();
                    if (isNaN(text)) {
                        $(element).val("")
                        return false;
                    }
                }, 0);
            }

            function numericOnlyKeyDown(event) {
                // Allow: backspace, delete, tab, escape, and enter
                if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                    // Allow: Ctrl+A/a
                    (event.keyCode == 65 || event.keyCode == 97) && (event.ctrlKey === true) ||
                    // Allow: Ctrl+C/c
                    (event.keyCode == 67 || event.keyCode == 99) && (event.ctrlKey === true) ||
                    // Allow: Ctrl+V/v
                    (event.keyCode == 86 || event.keyCode == 118) && (event.ctrlKey === true) ||
                    // Allow: Ctrl+X/x
                    (event.keyCode == 88 || event.keyCode == 120) && (event.ctrlKey === true) ||
                    // Allow: home, end, left, right
                    (event.keyCode >= 35 && event.keyCode <= 39)) {
                    // let it happen, don't do anything
                    return true;
                }
                else {
                    // Ensure that it is a number and stop the keypress
                    if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                        return false;
                    }
                }
            }
        }
    });
4

2 に答える 2

0

HTML5<input type="number">は、実際にこれで行きたいところです。それをサポートするブラウザー (基本的には Safari と古いバージョンの IE を除くすべて) を使用している場合は、必要なすべてのことが行われます。

そうは言っても、onpasteハンドラーを登録して、ユーザーが貼り付けた後に貼り付けられたコンテンツを数字だけに削減できるようにしてみませんか?

于 2013-06-24T03:41:14.150 に答える