Home > Article > Web Front-end > Example of H5 processing of number input box

Example of H5 processing of number input box

零下一度Original: 2017-06-26 13:29:291425browse

In recent H5 development, the amount input box was used, but there was no customized amount keyboard, so type="number" was used to call the system's numeric keyboard.

According to requirements, users cannot enter other content except numbers. The amount can only be entered to two decimal places at most.

So I did some research on the number keyboard. When the user enters a non-number, the value obtained is empty, but the input box still displays the content entered by the user.

For example: the user enters a, the value of the channel is empty, but the input box displays a; special case (when the user enters 2., the value obtained is 2, and the input box displays 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>

You can try it, this way you can limit the user’s input

The above is the detailed content of Example of H5 processing of number input box. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Let’s talk about my understanding of vuexNext article：Let’s talk about my understanding of vuex

See more

Example of H5 processing of number input box

Related articles