Sonntag, Juni 7, 2020

Javascript Input Text Maskierung ohne Plugin

Möchte ich Maske wird der text in ein Eingabefeld ohne änderung der tatsächlichen Wert. Ich kann keine plugins.

Aktuell bin ich dabei – aber wie Sie sehen können, das Problem ist, dass der tatsächliche Wert wird geändert auf „Absenden“. Wie kann ich ändern Sie einfach den Wert anzeigen?

$("input[name='number']").focusout(function(){
    var number = this.value.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3");
    this.value = number;
}
Die <input> element nicht eine Anzeige Wert. Der Wert der Eingabe ist das, was der Benutzer sieht. Sie wollen zu erstellen 2 Eingänge: der eine ist für den tatsächlichen Wert, der andere für die Anzeige und ggf. die Einnahme von den Eingaben des Benutzers.
Wie möchten Sie die Maske zur Formatierung der Inhalte?
die Maske würde-format dasselbe wie die obige Funktion 00-000-00. Hinzufügen von Strichen zu 8 Nummern
Ich erstellte für Sie eine Lösung basierend auf dem gewünschten format.

InformationsquelleAutor user1392897 | 2016-11-09

2 Kommentare

  1. 4

    Müssen Sie zwei Eingänge

    Zwei Eingänge bekommen sollte den job zu erledigen. Eine Eingabe enthalten wird der maskierte text und der andere wird ein hidden-input, enthält die echten Daten.

    <input type="text" name="masknumber">
    <input type="text" name="number" style="display:none;">

    Die Art, wie ich näherte sich die Maskierung zu bauen, eine Funktion für die Maskierung und Demaskierung der Inhalt so bleibt alles einheitlich.

    $("input[name='masknumber']").on("keyup change", function(){
            $("input[name='number']").val(destroyMask(this.value));
        this.value = createMask($("input[name='number']").val());
    })
    
    function createMask(string){
        return string.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3");
    }
    
    function destroyMask(string){
        return string.replace(/\D/g,'').substring(0,8);
    }

    Arbeiten JSFiddle

    InformationsquelleAutor DominicValenciana

  2. 0

    oder auch

    <input type="text" onkeypress="handleMask(event, 'data: 99/99/9999 99:99 999 ok')" placeholder="data:  ok" size=40>

    mit

    function handleMask(event, mask) {
        with (event) {
            stopPropagation()
            preventDefault()
            if (!charCode) return
            var c = String.fromCharCode(charCode)
            if (c.match(/\D/)) return
            with (target) {
                var val = value.substring(0, selectionStart) + c + value.substr(selectionEnd)
                var pos = selectionStart + 1
            }
        }
        var nan = count(val, /\D/, pos) //nan va calcolato prima di eliminare i separatori
        val = val.replace(/\D/g,'')
    
        var mask = mask.match(/^(\D*)(.+9)(\D*)$/)
        if (!mask) return //meglio exception?
        if (val.length > count(mask[2], /9/)) return
    
        for (var txt='', im=0, iv=0; im<mask[2].length && iv<val.length; im+=1) {
            var c = mask[2].charAt(im)
            txt += c.match(/\D/) ? c : val.charAt(iv++)
        }
    
        with (event.target) {
            value = mask[1] + txt + mask[3]
            selectionStart = selectionEnd = pos + (pos==1 ? mask[1].length : count(value, /\D/, pos) - nan)
        }
    
        function count(str, c, e) {
            e = e || str.length
            for (var n=0, i=0; i<e; i+=1) if (str.charAt(i).match(c)) n+=1
            return n
        }
    }

    InformationsquelleAutor Giacomo

Kostenlose Online-Tests