js輸入密文彈出數字鍵盤

我們經常被產品要求，在移動端的web頁面上的輸入框輸入密碼時要彈出數字鍵盤，而不是全鍵盤，這個該怎么實現呢？

1.首先要彈出數字鍵盤，我們只能把input框的type從password改為tel

2.但經過第一步，輸入的內容會變成明文，這時候也要星號顯示，改怎么實現

經過一番研究，找到如下的實現方法：

function setPass(e) {
            var target = e.currentTarget,
                idx = target.selectionStart,
                val = $(target).val(),
                nextval = $(target).next().val(),
                maxLen = $(target).attr('maxlength') || 6,
                single = val.slice(idx - 1, idx),
                left = '',
                right = '';
            if (val.length == nextval.length) return;
            if (val.length > nextval.length) { //添加
                if (/\d/g.test(single)) { //如果是數字
                    left = nextval ? (nextval.slice(0, idx - 1) + single) : single;
                    right = nextval.slice(idx - 1, maxLen);
                }
                if (/\D/g.test(single)) { //如果是非數字字符
                    left = nextval ? nextval.slice(0, idx - 1) : '';
                    right = nextval.slice(idx - 1, maxLen);
                }
            }
            if (val.length < nextval.length) { //刪除
                left = nextval ? nextval.slice(0, idx) : '';
                right = nextval.slice(idx + 1, maxLen);
            }
            val = (left + right).replace(/\d/g, "●");
            if (!val) {
                $(target).next().val(left + right);
            } else {
                $(target).val(val).next().val(left + right);
            }

        }

當輸入框的input事件觸發的時候調用以上方法

<input type='tel' id='psd'>

document.getElementById('psd').onclick=setPass;

效果如下

 

這里有兩個input，為什么一個輸入框要有兩個input呢？因為第一個是用來觸發setPass事件的，把用戶輸入的字符轉換成星號顯示，第二個才是真正用來提交數據的（第二個得隱藏）