[英]How to Auto Focus on next input box with jeasyui
我在使用簡單的 UI 插件時在下一個文本框中設置焦點時遇到問題。 我知道有一個選項可以使用 MaskedBox
<input class="easyui-maskedbox" mask="(999) 999-9999" style="width:100%">
但我想用easyui-textbox來做到這一點,任何人都可以幫助我在功能上做到這一點。
HTML:
<div class="otp-textbox">
<input type="text" class="easyui-textbox" />
<input type="text" class="easyui-textbox" />
<input type="text" class="easyui-textbox" />
</div>
在 DOM 中生成 HTML
<div class="otp-textbox">
<input type="text" class="easyui-textbox textbox-f" style="display: none;">
<span class="textbox">
<input id="_easyui_textbox_input20" type="text" class="textbox-text validatebox-text textbox-prompt"
autocomplete="off" tabindex="" placeholder="" maxlength="1"
style="margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 28px; line-height: 28px; width: 182.4px;">
<input type="hidden" class="textbox-value" value="">
</span>
<input type="text" class="easyui-textbox textbox-f" style="display: none;">
<span class="textbox">
<input id="_easyui_textbox_input21" type="text" class="textbox-text validatebox-text textbox-prompt"
autocomplete="off" tabindex="" placeholder="" maxlength="1"
style="margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 28px; line-height: 28px; width: 182.4px;">
<input type="hidden" class="textbox-value" value="">
</span>
<input type="text" class="easyui-textbox textbox-f" style="display: none;">
<span class="textbox">
<input id="_easyui_textbox_input22" type="text" class="textbox-text validatebox-text textbox-prompt"
autocomplete="off" tabindex="" placeholder="" maxlength="1"
style="margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 28px; line-height: 28px; width: 182.4px;">
<input type="hidden" class="textbox-value" value="">
</span>
</div>
JS
$(".otp-textbox .textbox").find('input.textbox-text').each(function () {
$(this).attr('maxlength', 1);
$(this).on('keyup', function (e) {
if (this.value.length == this.maxLength) {
$(this).next().focus();
}
});
});
你能試試這個嗎:
$(this).nextAll('input').first().focus();
對此:
$(this).next().focus();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.