input输入框失去焦点后文本如何右对齐?

hping
  • 483
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>div{
        display: inline-block;
        width: 32%;
        /*height: 24%;*/
        font-size: 55px;
        line-height: 98px;
        background-color: #fefeee;
        border: 1px solid #ddd;
        cursor: default;
    }
</style>
<body>
<div class="main_keypad" onselectorstart="return false">
    <div class="input_keypad">
        <input id="keybadinput" />
    </div>
    <div class="btns_keypad">
        <div>1</div><div>2</div><div>3</div>
        <div>4</div><div>5</div><div>6</div>
        <div>7</div><div>8</div><div>9</div>
        <div>*</div><div>0</div><div>#</div>
    </div>
</div>
<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>
评论
阅读 3.3k
1 个回答

onblur="this.style.textAlign='right'"

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏