2

テキストフィールドでのキーボード入力を数字[0-9]とマイナス記号-のみ（コピー/貼り付けなどなし）と削除キーのみに制限しようとしています。

-コードは数字と削除キーに制限するために機能しますが、マイナス記号の部分では機能しません。

-ユーザーは自分の番号の前にマイナス記号を入力することしかできないはずです。入力しようとすると、入力1し-ないはず-ですが、現時点ではその-部分はまったく機能しません。

フィドル： http： //jsfiddle.net/7XLqQ/1/

このコードが問題だと思いますが、問題ないようです。テキスト入力が空白であることを確認し、空白の場合はマイナス記号を入力します-。

// Only enter the minus sign (-) if the user enters it first
if (unicode == 45 && input.value == "") {
    return true;
}

私の完全なコード：

<input type="text" maxlength="10" id="myInput">

<script>
var input = document.getElementById("myInput");

input.onkeypress = function(e) {
   var unicode = e.keyCode;

    if (unicode == 49 || unicode == 50 || unicode == 51 || unicode == 52 || unicode == 53 || unicode == 54 || unicode == 55 || unicode == 56 || unicode == 57 || unicode == 48) {
        return true;
    } else {
        return false;   
    }

    // Only enter the minus sign (-) if the user enters it first
    if (unicode == 45 && input.value == "") {
        return true;
    }
};
</script>
4

4 に答える 4

1

keyCodeIE を除くすべてのブラウザーで間違ったプロパティです。charCodeまたはwhich他のブラウザで必要です。これを使用すると、代わりに文字コードが取得され、正規表現を使用して入力された文字をテストできます。また、ブラウザーで削除、バックスペース、矢印キーkeypressなどのキーのイベントを発生させる、印刷できないキー押下を許可する必要があります。

デモ: http://jsfiddle.net/7XLqQ/3/

var input = document.getElementById("myInput");

input.onkeypress = function(e) {
    e = e || window.event;
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;

    // Allow non-printable keys
    if (!charCode || charCode == 8 /* Backspace */ ) {
        return;
    }

    var typedChar = String.fromCharCode(charCode);

    // Allow numeric characters
    if (/\d/.test(typedChar)) {
        return;
    }

    // Allow the minus sign (-) if the user enters it first
    if (typedChar == "-" && this.value == "") {
        return;
    }

    // In all other cases, suppress the event
    return false;
};

ここでは考慮されていないケースが 1 つあります。それは、ユーザーがキャレットを入力の先頭に置き、マイナス記号を入力した場合です。そのためには、キャレットの位置を検出する必要があります。キャレットが入力の先頭にあるかどうかを検出するためのクロスブラウザー コードを次に示します。この回答は次のとおりです。

function isCaretAtTheStart(el) {
    if (typeof el.selectionEnd == "number") {
        // Modern browsers
        return el.selectionEnd == 0;
    } else if (document.selection) {
        // IE < 9
        var selRange = document.selection.createRange();
        if (selRange && selRange.parentElement() == el) {
            // Create a working TextRange that lives only in the input
            var range = el.createTextRange();
            range.moveToBookmark(selRange.getBookmark());
            return range.moveEnd("character", -el.value.length) == 0;
        }
    }
    return false;
}

改訂されたデモは次のとおりです: http://jsfiddle.net/7XLqQ/5/

最後に、JavaScript キーイベントに関する私のお気に入りのリソースです。これは、あなたが知る必要があるすべてを教えてくれます: http://unixpapa.com/js/key.html

于 2013-02-22T00:04:19.593 に答える
1

私はお勧めします：

var input = document.getElementById("myInput");

input.onkeypress = function(e) {
    switch (e.keyCode){
        case 45:
            return this.value.length == 0 ? true : false;
            break;
        case 48:
        case 49:
        case 50:
        case 51:
        case 52:
        case 53:
        case 54:
        case 55:
        case 56:
        case 57:
            return true;
            break;
        default:
            return false;
            break;
    }
};

JS フィドルのデモ。

if元のコードが失敗した理由は、条件が評価される前に関数から既に戻っていたためです。このバージョンでは、-キーが押されるtrueと、現在の値がない場合 (したがって が-最初の文字になる)、またはfalse値が既に存在する場合 (したがって が-最初の文字ではない)、3 進数が返されます。

于 2013-02-21T23:22:02.553 に答える
1

操作の順序、マイナス記号について尋ねる前に、0-9 で false を返しています。マイナス記号 if ブロックを 0-9 if ブロックの上に移動し、あなたはゴールデンです

<input type="text" maxlength="10" id="myInput">

<script>
var input = document.getElementById("myInput");

input.onkeypress = function(e) {
   var unicode = e.keyCode;

    // Only enter the minus sign (-) if the user enters it first
    if (unicode == 45 && input.value == "") {
        return true;
    }

    if (unicode == 49 || unicode == 50 || unicode == 51 || unicode == 52 || unicode == 53 || unicode == 54 || unicode == 55 || unicode == 56 || unicode == 57 || unicode == 48) {
        return true;
    } else {
        return false;   
    }


};
</script>
于 2013-02-21T23:19:40.040 に答える