简体   繁体   English

如何使用 jeasyui 自动聚焦下一个输入框

[英]How to Auto Focus on next input box with jeasyui

I have a problem setting focus in the next textbox am using the easy UI plugin.我在使用简单的 UI 插件时在下一个文本框中设置焦点时遇到问题。 I know there is an option do this with MaskedBox我知道有一个选项可以使用 MaskedBox

<input class="easyui-maskedbox" mask="(999) 999-9999" style="width:100%"> 

but I want to do this with the easyui-textbox can anyone help me do this functionally.但我想用easyui-textbox来做到这一点,任何人都可以帮助我在功能上做到这一点。

HTML: HTML:

 <div class="otp-textbox">
    <input type="text" class="easyui-textbox" />
    <input type="text" class="easyui-textbox" />
    <input type="text" class="easyui-textbox" />
</div>

Generate the HTML in DOM在 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 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();
        }
    });
});

Can you try this:你能试试这个吗:

$(this).nextAll('input').first().focus();

Instad of this:对此:

$(this).next().focus();

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM