Beispiel für die H5-Verarbeitung des Zahleneingabefelds-js-Tutorial-php.cn

Beispiel für die H5-Verarbeitung des Zahleneingabefelds

零下一度

Freigeben： 2017-06-26 13:29:29

Original

1441 Leute haben es durchsucht

In der jüngsten H5-Entwicklung wurde das Betragseingabefeld verwendet, aber es gab keine benutzerdefinierte Betragstastatur, daher wurde type="number" verwendet, um die numerische Tastatur des Systems aufzurufen.

Gemäß den Anforderungen können Benutzer keine anderen Inhalte als Zahlen eingeben. Der Betrag kann maximal mit zwei Dezimalstellen eingegeben werden.

Also habe ich etwas über die Zahlentastatur recherchiert. Wenn der Benutzer eine Nicht-Zahl eingibt, ist der erhaltene Wert leer, aber das Eingabefeld zeigt immer noch den vom Benutzer eingegebenen Inhalt an.

Zum Beispiel: Der Benutzer gibt einen ein, der Wert des Kanals ist leer, aber das Eingabefeld zeigt einen Sonderfall an (wenn der Benutzer 2 eingibt, ist der erhaltene Wert 2 und das Eingabefeld wird angezeigt 2.)

<!DOCTYPE html><html><head><title>demo5</title><meta charset="utf-8"><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><style type="text/css"></style></head><!-- 禁用复制 ，除去一些不必要的因素 --><body onpaste="return false"><div><input type=&#39;number&#39; id = &#39;number&#39;></div></body><script type="text/javascript">var me = window;
    (function init(){
        me.number = getId('number');
        me.n = '';
        initEvent();        function initEvent(){
            me.number.addEventListener('keyup', number, false);
        }function getId(id){return document.getElementById(id);
        }function number(){//金额，            console.log(this.value);if(this.value == ''){//校验，用户输入后，输入框的值是否为数字，当不为数字时，取到的为空this.value='';this.value = me.n;return}if(!/^\d{0,9}\.{0,1}(\d{1,2})?$/.test(this.value)){//校验不超过两位小数this.value = me.n;
            }if(window.event.keyCode != 8){if(this.value%1==0 && me.n==this.value){//当用户按下非删除键时，新值和旧值相同,旧值为整数return}if(me.n.indexOf(".")>-1 && me.n==this.value){//当用户按下非删除键时，新值和旧值相同,旧值为小数this.value='';this.value = me.n;return}
            }else{if(me.n.indexOf(".")>-1 && this.value.indexOf(".")<0){//当按下删除时，删掉小数点时                    me.n = this.value;return}
            }
            me.n = this.valueif(me.n.indexOf(".")>0){this.value = me.n;
            }
        }
    }())</script></html>

Nach dem Login kopieren

Sie können es ausprobieren, auf diese Weise können Sie die Eingaben des Benutzers einschränken

Das obige ist der detaillierte Inhalt vonBeispiel für die H5-Verarbeitung des Zahleneingabefelds. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!