转化一下解决问题的思路，弯道超车

遇到一个数字密码的问题。
用户点击密码input框，多次点击会触发奇怪的定位问题。
我的思路是获取点击事件，然后进行处理。

搜索了半天，什么onclick，onchange，onfocus，onkeyup...都试了，都不行！
气的都想把电脑砸了！

后来想了一下索性不让用户去乱点击，而是通过统一的获取焦点。

使用遮罩层，把input框挡住。

效果还不错。

.mask {
    position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #f6fff1;
    z-index: 1002; left: 0px;
    opacity:0.1; -moz-opacity:0.1;
}

<div class="aui-row number-password" style="padding:2rem 0.2rem;" onclick="focusPwd();">

    <div id="pwd_area" class="aui-col-xs-12">
        <div id="mask" class="mask"></div>
        <input class="put" id="number-password-input" type="tel" maxlength="12" tabindex="6"
                               onkeyup="dealKeyup(this);" >
    </div>
</div>

function showMask(){
    $("#mask").css("height",$('#pwd_area').height());
    $("#mask").css("width",$('#pwd_area').width());
    $("#mask").show();
}


    
function focusPwd() {
    $('#number-password-input').focus();
}

遮罩层刚好挡住input框，跟input框重合。不影响其他的空间使用。

点击input框外的地方，使用input获取聚焦事件。

这样就不会出现用户乱点击，乱聚焦的问题了。

转换解决问题的思路，弯道超车。