我創建了一個自動標簽功能,當用戶輸入一個數字時,會從輸入端切換到輸入端。這個自動制表功能在ios和使用電腦鍵盤時效果很好。但在安卓系統中,它在觸摸事件中不起作用。有什么解決方法嗎?
代碼
。$('.digits'). find('input')。each(function() {
$(this).attr('maxlength', 1) 。
$(this).on('keyup',function(e) {
var parent = $($(this).parent()) 。
if(e.keyCode ==8 || e.keyCode ==37) {
var prev = parent.find('input#' $(this) 。 data('previous') )。
if(prev.length) {
$(prev).select()。
}
} else if((e.keyCode >= 48 && e. keyCode <= 57) || (e.keyCode >=65 && e.keyCode <=90) ||(e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode ==39) {
var next = parent.find('input#' $(this) 。 data('next') )。
if(next.length) {
$(next).select()。
} else {
if(parent.data('autosubmit') ) {
parent.submit()。
}
}
}
});
});
.verification-code {
max-width: 100%;
position: relative;
/*margin:50px auto;*/
text-align: center;
}
.control-label{
display:block;
margin:40px auto;
font-weight:900;
}
.verification-code-inputs input[type=text]/span> {
border: 2px solid #e1e1e1;
width: 46px;
height: 46px;
padding: 10px;
text-align: center;
display: inline-block;
box-sizing: border-box;
}
<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<div class="verify-code">/span>
<label class="control-label"/span>> 驗證碼</label>
<div class="verification-code-inputs digits text-black">
<input oninput="this.value = this.value.replace(/[^0-9.]/g, '' ).replace(/(..*? ). */g, '$1'); " class="text-black" id="digit-1" name="digit- 1"/span> data-next="digit-2" type="text" maxlength="1" />。
<input oninput="this.value = this.value.replace(/[^0-9.]/g, '' ).replace(/(.*? ). */g, '$1'); " class="text-black" id="digit-2" name="digit- 2"/span> data-next="digit-3" type="text" maxlength="1" />
<input oninput="this.value = this.value.replace(/[^0-9.]/g, '' ).replace(/(.*? ). */g, '$1'); " class="text-black" id="digit-3" name="digit- 3"/span> data-next="digit-4"/span> type="text" maxlength="1" />
<input oninput="this.value = this.value.replace(/[^0-9.]/g, '' ).replace(/(.*? ). */g, '$1'); " class="text-black" id="digit-4" name name="digit-4" type="text" maxlength="1" />。
<!--<input id="digit-5" name="digit-5" type="text" maxlength="1" />-->
</div>
</div>/span>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
uj5u.com熱心網友回復:
這可能很簡單,就是用.select()方法替換你的.focus() 方法。還有一些比使用查找更簡單的方法來添加你的事件。你可以直接添加一個類,然后根據這個類來附加事件。你可以簡單地使用.next() DOM遍歷方法,而不是使用屬性來查找下一個輸入。另外,你也許可以使用regex使你的僅有的數字檢查作業更簡單。這里有很多方法可以減少你的代碼:
$(document) 。 on('keyup', 'input.text-black', function(e){
var _this = $(this)。
next = _this.next()。
_this.val(e.target.value。 replace(/[^0-9]/g, ''/span>)
if (!!next && _this.val().length)
{
next.focus()。
}
});
我確實在安卓系統上測驗了這個方法,它似乎對我有用。我還添加了一個檢查,以驗證輸入是否有一個長度,然后再移動到下一個輸入。
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/312027.html
標籤:
