我有一个电话号码输入和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();
}
});
});
代码请!或给你的codepen – divy3993
@ divy3993更新完美的链接! –
好的,@Steve Jones看看我的答案能帮助你。 – divy3993