1

私はhtml<input>といくつかのパターン（-?\d*\.?\d*浮動小数点値など）を持っています。
一致しない値を入力しないようにする必要があります。
次の方法でやりました 

jQuery.fn.numeric = function (pattern) 
{
   var jqElement = $(this), prevValue;
    jqElement.keydown(function()
    {
                          prevValue = jqElement.val();
    })
    jqElement.keyup(function(e)
    {
       if (!pattern.test(jqElement.val()))
       {
          jqElement.val(prevValue);
          e.preventDefault();
       }
       prevValue = ""
    }) 
};

JSFiddle DEMO

ただし、この場合、値はユーザーに表示され、正しい値に修正されます。
ユーザーに表示される前に値を確認する方法はありますか?

patternから属性を使用できますhtml5

4

4 に答える 4

1

このPOJSはどうですか。私はaddEventjqueryの代わりにクロスブラウザ関数を使用しており、正規表現は使用していませんが、あなたが探しているものを達成すると信じています. +またはを押すと-、値の符号が変わります。

HTML

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

Javascript

/*jslint maxerr: 50, indent: 4, browser: true */


(function () {
    "use strict";

    function addEvent(elem, event, fn) {
        if (typeof elem === "string") {
            elem = document.getElementById(elem);
        }

        function listenHandler(e) {
            var ret = fn.apply(null, arguments);

            if (ret === false) {
                e.stopPropagation();
                e.preventDefault();
            }

            return ret;
        }

        function attachHandler() {
            window.event.target = window.event.srcElement;

            var ret = fn.call(elem, window.event);

            if (ret === false) {
                window.event.returnValue = false;
                window.event.cancelBubble = true;
            }

            return ret;
        }

        if (elem.addEventListener) {
            elem.addEventListener(event, listenHandler, false);
        } else {
            elem.attachEvent("on" + event, attachHandler);
        }
    }

    function verify(e) {
        var target = e.target, // shouldn't be needed: || e.srcElement;
            value = target.value,
            char = String.fromCharCode(e.keyCode || e.charCode);

        if (value.charAt(0) === "-") {
            if (char === "+") {
                e.target.value = value.slice(1);
            }
        } else if (char === "-") {
            e.target.value = char + value;
            return false;
        }

        value += char;
        return parseFloat(value) === +value;
    }

    addEvent("test", "keypress", verify);
}());

jsfiddleについて

正しい値を使用したと思いますkeyCode || charCode が、検索して確認することをお勧めします。正しいものの要約はここで入手できます

于 2013-06-21T18:10:57.540 に答える
0

このコードを試してください：

jQuery.fn.numeric = function (pattern) 
{
    $(this).keypress(function(e)
    {
         var sChar = String.fromCharCode(!e.charCode ? e.which : event.charCode);
        e.preventDefault();
        var sPrev = $(this).val();
        if(!pattern.test(sChar)){
            return false;
        } else {
            sPrev = sPrev + sChar;
        }

        $(this).val(sPrev);

    });

};

$("#validateId").numeric(/^-?\d*\.?\d*$/);

jsfiddle.net/aBNtH/

更新: 私の例では、入力中に各文字を検証します。代わりに入力フィールドの値全体を確認したい場合は、Input blur() などの他のイベントで値を検証することをお勧めします。

于 2013-06-21T12:21:17.447 に答える