onblur="this.style.textAlign='right'"
javascript - input输入框失去焦点后文本如何右对齐？-PHP中国語ネットワークQ&A

1.JavaScript做一个拨号盘，输入号码超过input输入框后，每次输入号码时，由于input输入框失去焦点，里面的数字会向左闪一下，体验不好，不明白的复制下面代码，运行，输入10几个数字后就能看的闪动的效果，非常不好；（只需考虑chrome就可）

2.代码：
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>拨号盘demo</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .main_keypad{
        width: 400px;
        height: 600px;
        margin: 30px auto;
        border: 1px solid #000;
        -webkit-user-select: none;
    }
    #keybadinput{
        display: block;
        width: 350px;
        font-size: 75px;
        line-height: 65px;
        text-align: center;
        border: none;
        background-color: none;
        margin: 0 auto;
    }
    #keybadinput:focus{
        outline: none;
    }
    .btns_keypad{
        width: 350px;
        height: 400px;
        font-size: 0;
        text-align: center;
        line-height: 0;
        margin: 20px auto;
    }
    .btns_keypad>p{
        display: inline-block;
        width: 32%;
        /*height: 24%;*/
        font-size: 55px;
        line-height: 98px;
        background-color: #fefeee;
        border: 1px solid #ddd;
        cursor: default;
    }
</style>
<body>
<p class="main_keypad" onselectorstart="return false">
    <p class="input_keypad">
        <input id="keybadinput" />
    </p>
    <p class="btns_keypad">
        <p>1</p><p>2</p><p>3</p>
        <p>4</p><p>5</p><p>6</p>
        <p>7</p><p>8</p><p>9</p>
        <p>*</p><p>0</p><p>#</p>
    </p>
</p>
<script type="text/javascript">
    var input = document.getElementById('keybadinput');
    var reg = /[^0-9+*#]/g;

    input.focus();
    document.addEventListener('click', function (){
        input.focus();
    });

    var keypad = document.querySelector('.btns_keypad');

    // 绑定单击事件，输入
    keypad.addEventListener('click', function(event){
        var srcElem = event.srcElement;
        var number = srcElem.textContent;
        var tempSelectionStart;                                     // 记录光标位置
        var value = input.value || '';                                // 输入框的value

        if( !reg.test( number ) ){
            tempSelectionStart = input.selectionStart;
            input.value = value.substring( 0, tempSelectionStart ) + number +
                          value.substring( tempSelectionStart );
            tempSelectionStart++;
            input.setSelectionRange( tempSelectionStart, tempSelectionStart );
        };
    });

    // 输入框监听输入事件，禁止输入字母
    input.addEventListener('input', function(){
        var tempValue;
        var value = input.value;
        var tempSelectionStart = input.selectionStart;
        var len = value.length;
        tempValue = value.replace( reg, '');
        input.value = tempValue
        tempSelectionStart = tempSelectionStart - ( len - tempValue.length );
        input.setSelectionRange( tempSelectionStart, tempSelectionStart );
        input.focus();
    });


    /*
      * 问题描述：输入框输入字符数超过输入框显示范围后，通过button按钮输入数字时输入框内字符会闪一下，
      * 究其原因是输入框失去焦点时chrome浏览器input输入框自动显示到第一个字符；
      * 不知道有没有办法阻止浏览器的这种默认行为？
     */
</script>
</body>
</html>