javascript - input输入框失去焦点后文本如何右对齐？
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>
