Input Limit zu zahlen und . auf input Feld

Folgenden auf die aus einer anderen Frage habe ich gefragt, was ich wirklich nicht zu sein scheinen immer und überall. Aufgrund meiner Unfähigkeit. Ich entschied mich für die Jungs beantworten , weil er meine Frage beantwortet.

Ich versammle ich nicht die richtige Frage denn ich habe keine Ahnung, was zu tun ist ..

So Problem ist, ich habe input-element . Halten Sie es einfach;

<input type="text" maxlength="12" name="price" id="price" class="foo">

Ich möchten, dass Benutzer in der Lage, geben Sie nur zahlen und nur eine Periode ( . ) auf eine beliebige Stelle im Preis. so könnte 3.00 oder 300.00 oder 3000

Könnte jemand bitte helfen Sie mir, ich werde goggle-eyed.

Die Ältere Frage, die gestellt wurde hier Schnelle regex mit Alarm

  • was 300.? Ist, dass eine gültige Eingabe?
  • ja, das ist gut. wir können Streifen aus dem . wenn nichts folgt, es server-Seite
  • ist nur ein . einen akzeptablen input?
  • Nein. Ich dachte, dass regex ( nicht, dass ich es verstehen oder wie es zu implementieren ) festgelegt werden konnte, zu erwarten, eine Zahl ( min 1 Zahl ) dann ist jede Kombination von entweder andere zahlen oder einen Zeitraum.
  • Kann es sein, eine Nummer wie 123.45 oder hat das Teil nach einem Dezimalkomma (falls vorhanden) werden alle Nullen?
  • kann aus einer beliebigen Kombination von Ziffern mit oder ohne Dezimalpunkt ( Zeit für die Amerikaner), und nur ein Dezimalpunkt , keine anderen Zeichen. Also nur zahlen und nur eine Periode ( in anderen Worten , Zeit ist nicht erforderlich, aber wenn man typisiert ist , nicht mehr eingegeben werden kann )

InformationsquelleAutor 422 | 2012-01-20
  1. 12

    Könnte man, in der change - Ereignis der Eingabe überprüfen, ob das Zahlenformat ist OK. Dieser code wird versucht, die Anzahl und entfernen alles andere: (ich gehe davon aus, dass du jQuery verwenden, wenn nicht, bitte tun)

    $('#price').change(function() {
    $(this).val($(this).val().match(/\d*\.?\d+/));
});

    Sehe es hier.

    BEARBEITEN: wenn Sie nicht über jQuery, dieser code macht das gleiche (zumindest in Chrome):

    document.getElementById('price').onchange = function() {
    this.value = this.value.match(/\d*\.?\d+/);
};

    EDIT 2: nicht sicher, ob ich Folgen, aber man könnte hinzufügen, auch dies zu verhindern, Buchstaben und andere Zeichen vor die change Veranstaltung:

    $('#price').keypress(function(event) {
    var code = (event.keyCode ? event.keyCode : event.which);
    if (!(
            (code >= 48 && code <= 57) //numbers
            || (code == 46) //period
        )
        || (code == 46 && $(this).val().indexOf('.') != -1)
       )
        event.preventDefault();
});
    • Ich nutze jquery und dein Beispiel ist nicht für mich arbeiten, kann ich geben Sie absolut alles. ??
    • Ja, und es sollte stets nur die Nummer. Blick auf meine fiddle (der link, den ich gepostet)
    • und schauen Sie auf meine Frage ( die Frage, die ich gepostet ) nur zahlen und nur eine Periode
    • Danke @cambraca Ihre zweite Bearbeiten, die Ergebnisse in der keine Fähigkeit zu geben.
    • Ich bin nicht begeistert, es zu tun auf das keypress-Ereignis, könnte es buggy sein, aber es ist definitiv können Sie zahlen eingeben und den Zeitraum (zumindest in meinem test dauerte es, Chrome, Win7)
    • Meine Letzte änderung das problem lösen könnte
    • es muss nicht buggy sein! Der link, den ich gepostet ist cross-browser. Ich verwende diese Technik und es macht mehr Sinn, als das zurücksetzen der Wert, nachdem es verändert wurde. Das keypress-Ansatz beschäftigt sich mit ihm, bevor der Wert überhaupt ändert
    • Hi @cambraca ja fast da jsfiddle.net/ozzy/nSFBk/2 scheinbar kann ich hinzufügen, mehr als eine Periode. Ich denke, es gibt keinen Weg um Sie herum..
    • oh, und seeminlgy müssen Sie die backspace-Taste lol ( und nicht mehr als zwei Ziffern nach einem Punkt eingegeben werden), Gott seine komplexe huh
    • Sie brauchen nicht zu testen, für event.keyCode oder event.which. jQuery ist bereits die Normalisierung der das event-Objekt auf cross-browser, so können Sie immer den Wert aus event.keyCode.
    • Ok Blick auf meine Letzte änderung. Es wird nicht lassen Sie steckte zwei Perioden.
    • und wenn wir schon dabei sind.. versuchen Sie, einfügen von einigen junk-Wert in das Feld ein.
    • Eigentlich habe ich zuerst haben Sie mit nur event.keyCode, aber es hat nicht funktioniert in Firefox.
    • Das ist, warum ich nicht gerne mit der keypress Ansatz. Es sieht viel sauberer an mich, wenn Sie einfach, damit der Benutzer nichts eingeben und filtern Sie es mit der change Ereignis, wie meine ersten Beispiele.
    • Ich Stimme zu, es ist am besten, um Benutzern das geben, was Sie wollen und nur warnen Sie, wenn der Wert, den Sie eingegeben ist ungültig. Ich fand auch einen link zu einer question der Diskussion jQuery-Mangel für die Normalisierung.
    • ja, der erste Ansatz ist gut, aber wir sind den Umgang mit ppl, die hinzufügen, advertisiment und die Eingabe in einen Wert für die Ware, die Sie verkaufen möchten. Ich wollte nur einige inline-Methode für die Einschränkung und Kontrolle Preis-Eingang.
    • irgendeiner Weise Sie es tun (ich noch empfehlen die erste option nur dann), denken Sie daran zu überprüfen, die in den server. Diese JS Validierungen sind sehr leicht zu betrügen.
    • ok Dankeschön werde ich tun, dass auf der client-Seite, es ist leicht und nur ein idiot würde geben Kerl.lol

    InformationsquelleAutor cambraca
  2. 1

    Hier ist meine Lösung(Es validiert auch Daten/Werte kopieren&einfügen):

    function InputValidator(input, validationType, validChars) {
if (input === null || input.nodeType !== 1 || input.type !== 'text' && input.type !== 'number')
    throw ('Please specify a valid input');

if (!(InputValidator.ValidationType.hasOwnProperty(validationType) || validationType))
    throw 'Please specify a valid Validation type';

input.InputValidator = this;

input.InputValidator.ValidCodes = [];

input.InputValidator.ValidCodes.Add = function (item) {
    this[this.length] = item;
};

input.InputValidator.ValidCodes.hasValue = function (value, target) {
    var i;
    for (i = 0; i < this.length; i++) {
        if (typeof (target) === 'undefined') {
            if (this[i] === value)
                return true;
        }
        else {
            if (this[i][target] === value)
                return true;
        }
    }

    return false;
};

var commandKeys = {
    'backspace': 8,
    'tab': 9,
    'enter': 13,
    'shift': 16,
    'ctrl': 17,
    'alt': 18,
    'pause/break': 19,
    'caps lock': 20,
    'escape': 27,
    'page up': 33,
    'page down': 34,
    'end': 35,
    'home': 36,
    'left arrow': 37,
    'up arrow': 38,
    'right arrow': 39,
    'down arrow': 40,
    'insert': 45,
    'delete': 46,
    'left window key': 91,
    'right window key': 92,
    'select key': 93,
    /*creates Confusion in IE */
    //'f1': 112,
    //'f2': 113,
    //'f3': 114,
    //'f4': 115,
    //'f5': 116,
    //'f6': 117,
    //'f7': 118,
    //'f8': 119,
    //'f9': 120,
    //'f10': 121,
    //'f11': 122,
    //'f12': 123,
    'num lock': 144,
    'scroll lock': 145,
};

commandKeys.hasValue = function (value) {
    for (var a in this) {
        if (this[a] === value)
            return true;
    }

    return false;
};

function getCharCodes(arrTarget, chars) {
    for (var i = 0; i < chars.length; i++) {
        arrTarget.Add(chars[i].charCodeAt(0));
    }
}

function triggerEvent(name, element) {
    if (document.createEventObject) {
        //dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on' + name, evt)
    }
    else {
        //dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(name, true, true); //event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}

if (validationType == InputValidator.ValidationType.Custom) {
    if (typeof (validChars) === 'undefined')
        throw 'Please add valid characters';

    getCharCodes(input.InputValidator.ValidCodes, validChars);
}
else if (validationType == InputValidator.ValidationType.Decimal) {
    getCharCodes(input.InputValidator.ValidCodes, '0123456789.');
}
else if (validationType == InputValidator.ValidationType.Numeric) {
    getCharCodes(input.InputValidator.ValidCodes, '0123456789');
}

input.InputValidator.ValidateChar = function (c) {
    return this.ValidCodes.hasValue(c.charCodeAt(0));
}

input.InputValidator.ValidateString = function (s) {
    var arr = s.split('');

    for (var i = 0; i < arr.length; i++) {
        if (!this.ValidateChar(arr[i])) {
            arr[i] = '';
        }
    }

    return arr.join('');
}

function bindEvent(el, eventName, eventHandler) {
    if (el.addEventListener) {
        el.addEventListener(eventName, eventHandler, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + eventName, eventHandler);
    }
}

function getCaretPosition(i) {
    if (!i) return;

    if ('selectionStart' in i) {
        return i.selectionStart;
    }
    else {
        if (document.selection) {
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -i.value.length);
            return sel.text.length - selLen;
        }
    }
}

function setCursor(node, pos) {
    var node = (typeof (node) === "string" || node instanceof String) ? document.getElementById(node) : node;

    if (!node) {
        return false;
    }
    else if (node.createTextRange) {
        var textRange = node.createTextRange();
        textRange.collapse(true);
        textRange.moveEnd(pos);
        textRange.moveStart(pos);
        textRange.select();
        return true;
    } else if (node.setSelectionRange) {
        node.setSelectionRange(pos, pos);
        return true;
    }

    return false;
}

function validateActive() {
    if (input.isActive) {
        var pos = getCaretPosition(input);

        var arr = input.value.split('');

        for (var i = 0; i < arr.length; i++) {
            if (!this.ValidateChar(arr[i])) {
                arr[i] = '';

                if (pos > i)
                    pos--;
            }
        }
        console.log('before : ' + input.value);

        input.value = arr.join('');
        console.log('after : ' + input.value, input);
        setCursor(input, pos);

        setTimeout(validateActive, 10);
    }
}

bindEvent(input, 'keypress', function (e) {
    var evt = e || window.event;
    var charCode = evt.which || evt.keyCode;

    if (!input.InputValidator.ValidCodes.hasValue(charCode) && !commandKeys.hasValue(charCode)) {
        if (evt.preventDefault) {
            evt.preventDefault();
            evt.stopPropagation();
        }
        return false;
    }
});

bindEvent(input, 'keyup', function (e) {
    var evt = e || window.event;
    var charCode = evt.which || evt.keyCode;

    if (!input.InputValidator.ValidCodes.hasValue(charCode) && !commandKeys.hasValue(charCode)) {
        if (evt.preventDefault) {
            evt.preventDefault();
            evt.stopPropagation();
        }
        return false;
    }
});

bindEvent(input, 'change', function (e) {
    var dt = input.value;

    input.value = input.InputValidator.ValidateString(input.value);

    if (input.value !== dt)
        triggerEvent('change', input);
});

bindEvent(input, 'blur', function (e) {
    var dt = input.value;
    input.value = input.InputValidator.ValidateString(input.value);

    input.isActive = false;

    if (input.value !== dt)
        triggerEvent('blur', input);
});

bindEvent(input, 'paste', function (e) {
    var evt = e || window.event;
    var svt = input.value;

    if (evt && evt.clipboardData && evt.clipboardData.getData) {//Webkit - get data from clipboard, put into editdiv, cleanup, then cancel event
        if (/text\/html/.test(evt.clipboardData.types)) {
            var dt = evt.clipboardData.getData('text/html');

            input.value = input.InputValidator.ValidateString(dt);
            if (input.value !== dt)
                triggerEvent('change', input);
        }
        else if (/text\/plain/.test(e.clipboardData.types)) {
            var dt = evt.clipboardData.getData('text/plain');

            input.value = input.InputValidator.ValidateString(dt);
            if (input.value !== dt)
                triggerEvent('change', input);
        }
        else {
            input.value = '';
        }
        waitforpastedata(input, svt);
        if (e.preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
        return false;
    }
    else {//Everything else - empty editdiv and allow browser to paste content into it, then cleanup
        input.value = '';
        waitforpastedata(input, svt);
        return true;
    }
});

bindEvent(input, 'select', function (e) {
    var evt = e || window.event;

    if (evt.preventDefault) {
        evt.preventDefault();
        evt.stopPropagation();
    }
    return false;
});

bindEvent(input, 'selectstart', function (e) {
    var evt = e || window.event;

    if (evt.preventDefault) {
        evt.preventDefault();
        evt.stopPropagation();
    }
    return false;
});

/* no need to validate wile active,
   removing F keys fixed IE compatability*/
//bindEvent(input, 'fucus', function (e) {
//   input.isActive = true;
//   validateActive();
//});

//validate current value of the textbox
{
    var dt = input.value;
    input.value = input.InputValidator.ValidateString(input.value);

    //trigger event to indicate value has changed
    if (input.value !== dt)
        triggerEvent('change', input);
}

function waitforpastedata(elem, savedcontent) {
    if (elem.value !== '') {
        var dt = input.value;
        elem.value = elem.InputValidator.ValidateString(elem.value);

        if (input.value !== dt)
            triggerEvent('change', input);
    }
    else {
        var that = {
            e: elem,
            s: savedcontent
        }
        that.callself = function () {
            waitforpastedata(that.e, that.s)
        }
        setTimeout(that.callself, 10);
    }
}
}

InputValidator.ValidationType = new (function (types) {
    for (var i = 0; i < types.length; i++) {
        this[types[i]] = types[i];
    }
})(['Numeric', 'Custom', 'Decimal']);

    Anwenden, um eine Eingabe, tun Sie den folgenden :

    new InputValidator(document.getElementById('txtValidate'), InputValidator.ValidationType.Decimal);/* Numeric or Custom */

    Wenn Sie wählen Sie Benutzerdefiniert aus, wie die Validierung geben Sie zur Angabe der gültigen Zeichen.
    eg : 

    new InputValidator(document.getElementById('txtValidate'), InputValidator.ValidationType.Custom,'1234abc');
    InformationsquelleAutor Frans
  3. 0

    Cambraca Leitbild, Art der arbeiten, aber der beste ist der zuletzt genannte Ansatz , stornieren Sie das keypress-Ereignis-Filterung die keys vor, es zeigt sich stattdessen wieder rückgängig machen, was bereits getan wurde. Folge der Veränderung der Wert nach die Tatsache, daß er auf der position der Einfügemarke in das Feld ein.

    Hier ist ein Beispiel für die Abstraktion der Idee ein cross-browser Weg. Jemand sollte dieser port an ein jQuery-plugin, http://www.qodo.co.uk/assets/files/javascript-restrict-keyboard-character-input.html

    Ok, ich denke, ich werde-port. Aber ich bin kein jQuery Kerl, so ist dies ein ungetestet bare bones jQuery-plugin, das verwendet Ihren code
    http://jsfiddle.net/mendesjuan/VNSU7/3

    (function( $ ) {
    $.fn.restrict = function(regExp, additionalRestriction) {
        function restrictCharacters(myfield, e, restrictionType) {
            var code = e.which;
            var character = String.fromCharCode(code);
            //if they pressed esc... remove focus from field...
            if (code==27) { this.blur(); return false; }
            //ignore if they are press other keys
            //strange because code: 39 is the down key AND ' key...
            //and DEL also equals .
            if (!e.originalEvent.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
                if (character.match(restrictionType)) {
                    return additionalRestriction(myfield.value, character);
                } else {
                    return false;
                }
            }
        }
        this.keypress(function(e){
            if (!restrictCharacters(this, e, regExp)) {
                e.preventDefault();
            }
        });
    };
})( jQuery );

$('#field').restrict(/[0-9\.]/g, function (currentValue, newChar) {
    return !(currentValue.indexOf('.') != -1 && newChar == ".");    
});
    • das Problem weiterhin besteht, mehrere Perioden. Plus einer beliebigen Anzahl von Ziffern nach einem Punkt. Hovever dieser Ansatz erlaubt entf-Taste
    • Werfen Sie einen Blick wieder. Jetzt macht Sie eine Möglichkeit haben, nicht, dass mehrere Perioden und es ist implementiert. Sie ändern könnte, die zusätzliche Beschränkung, so dass es nur erlaubt eine Reihe von Ziffern nach dem Punkt, durch ändern des zweiten Parameters auf restrict
    InformationsquelleAutor Juan Mendes
Schreibe einen Kommentar