我输入的电话号码包含10个输入字段,当您填写每个数字时,它会跳到下一个字段。
我希望能够在我点击删除键时返回上一个字段(例如我在电话号码中输入了错误的数字)。我怎么能这样做?
查看我的CodePen: http://codepen.io/Steve-Jones/pen/qdMjWb/
HTML
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
<div class="phone-field">
(<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5" autofocus="autofocus">
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">)
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> -
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">
</body>
CSS
.phone-field {
margin: 50px;
font-size: 20px;
}
.phone-input {
width: 13px;
text-align: center;
font-size: 16px !important;
height: 1.75em;
border: 0;
outline: 0;
background: transparent;
border-bottom: 2px solid #ddd;
margin-right: 2px;
margin-left: 2px;
}
[placeholder]:focus::-webkit-input-placeholder {
transition: opacity 0.5s 0.0s ease;
opacity: 0;
}
的jQuery
$(document).ready(function(){
$('body').on('keyup', 'input.phone-input', function(){
if($(this).val().length === this.size){
var inputs = $('input.phone-input');
inputs.eq(inputs.index(this) + 1).focus();
}
});
});
答案 0 :(得分:2)
关键代码可能: CodePen
$(document).ready(function(){
$('body').on('keyup', 'input.phone-input', function()
{
var key = event.keyCode || event.charCode;
var inputs = $('input.phone-input');
if(($(this).val().length === this.size) && key != 32)
{
inputs.eq(inputs.index(this) + 1).focus();
}
if( key == 8 || key == 46 )
{
var indexNum = inputs.index(this);
if(indexNum != 0)
{
inputs.eq(inputs.index(this) - 1).val('').focus();
}
}
});
});
看着你的代码我发现了另一件事,就是空格键光标 到下一个索引。所以也要覆盖它,我认为这是合适的。
KeyCodes
Backspace = 8
删除= 46
空格键= 32
答案 1 :(得分:1)
http://codepen.io/anon/pen/XbPgjJ
只需注意退格键并向后移动而不是向前移动。
if(e.keyCode == 8){
var index = inputs.index(this);
if (index != 0)
inputs.eq(index - 1).val('').focus();
}
答案 2 :(得分:0)
只需检查键事件是否删除然后在元素之前进行聚焦。我更新你的js文件如下,它运作良好。
$(document).ready(function(){
$('body').on('keyup', 'input.phone-input', function(e){
if($(this).val().length === this.size){
var inputs = $('input.phone-input');
inputs.eq(inputs.index(this) + 1).focus();
}
if(e.keyCode == 8 || e.keyCode == 46){
var inputs = $('input.phone-input');
inputs.eq(inputs.index(this) - 1).focus();
}
});
});