常见的功能,复制验证序列号粘贴自动分割填入当前focus的input及后面input,每个框4个字符。同时实现当复制的内容自由分割后,某个input不足4个字符时,focus在那个input,超过4个字符则focus进入下一个input。
实现代码
HTML代码
<div class="serial"> <input type="text" class="text" id="input1" value="" maxlength="4" tabindex="1"> <input type="text" class="text" id="input2" value="" maxlength="4" tabindex="2"> <input type="text" class="text" id="input3" value="" maxlength="4" tabindex="3"> <input type="text" class="text" id="input4" value="" maxlength="4" tabindex="4"> </div>
jQuery代码
$('.serial .text').on('paste', function(event){
event.preventDefault();
var copydata = event.originalEvent.clipboardData;
var pastedata = copydata.getData('text').replace(/[\s!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/g, '');
var result = [];
for (let i = 0; i < pastedata.length; i += 4) {
result.push(pastedata.substr(i, 4));
}
var _rlen = result.length;
var _index = $(this).index();
var _focus = result[_rlen-1].length > 3 ? (_rlen + _index) : (_rlen + _index - 1);
if(_index > 0){
$('.serial .text').eq(_index-1).nextAll('.text').each(function(e){
$(this).val(result[e]);
});
}else{
$('.serial .text').each(function(e){
$(this).val(result[e]);
});
}
$('.serial .text').eq(_focus).focus();
});
$('.serial .text').on('input propertychange',function(){
if($(this).val().length > 3){
$(this).next().focus();
}
}); 