Question

我有一个带有不同可折叠块的表单，当我在块的最后一个字段中并且下一个块折叠时，键盘的箭头移动到t9，下一个字段被禁用。当我进入这个领域时，我已经完成了jquery mobile扩展下一个可折叠块，但箭头仍然被禁用，我怎样才能启用它？任何帮助将不胜感激。

问题是当折叠关闭时，键盘中的箭头被禁用：

当字段获得焦点时，仅启用展开时。当字段获得焦点但我仍然被禁用时，我试图扩展它。

代码：

HTML：

德奎恩点击折叠内容

                        <ul data-role="listview" data-divider-theme="b" class="ui-listview">                    
                            <li data-role="fieldcontain" class="ui-field-contain ui-li-static ui-body-inherit ui-first-child">
                                <label for="cuentaOrigen" class="labelSelect">Cuenta origen</label><div class="ui-select"><div id="transferenciaIntroducirDatosForm:cuentaOrigen:cuentaOrigen-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"><span class="{validate:{required:true}} controlCuenta">Selecciona una cuenta</span><select id="transferenciaIntroducirDatosForm:cuentaOrigen:cuentaOrigen" name="transferenciaIntroducirDatosForm:cuentaOrigen:cuentaOrigen" class="{validate:{required:true}} controlCuenta" size="1" data-theme="" tabindex="1" onchange="mojarra.ab(this,event,'change',0,'transferenciaIntroducirDatosForm:remitente',{'onevent':actualizarDatos})"> <option value="">Selecciona una cuenta</option>

                            <li data-icon="false" class="sinBordeSeparador" id="enlaceReutilizarTransferencia" style="display: none;">
                                 <a class="ico_reutilizar reutilizar ui-btn" href="#">Reutilizar transferencia</a>
                            </li>                               

                            <li data-role="fieldcontain" class="sinBordeSeparador ui-field-contain ui-li-static ui-body-inherit">
                                <label for="remitente">Nombre del ordenante</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input id="transferenciaIntroducirDatosForm:remitente" type="text" name="transferenciaIntroducirDatosForm:remitente" value="COM PROP AVDA LANZAGORTA 38 ZALLA" class="{validate:{required:true,caracteresSepa:true,maxlength:40}} control" maxlength="40" placeholder="Nombre del ordenante" tabindex="2"></div>
                            </li>

                            <li data-role="fieldcontain" class="sinBordeSeparador ultimo ui-field-contain ui-li-static ui-body-inherit ui-last-child">
                                <label for="conceptoOrigen">Concepto para el ordenante</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input id="transferenciaIntroducirDatosForm:conceptoOrigen" type="text" name="transferenciaIntroducirDatosForm:conceptoOrigen" class="{validate:{required:true,caracteresSepa:true,maxlength:80}} control" placeholder="Concepto para el ordenante" tabindex="3" maxlength="80"></div>
                            </li>                                                           
                        </ul>
                </div></div>                                            
            </li>

Paraquién 点击折叠内容

                    <ul data-role="listview" data-divider-theme="b" class="ui-listview">


                        <li data-role="fieldcontain" class="sinBordeSeparador ui-field-contain ui-li-static ui-body-inherit ui-first-child">
                            <label for="tipoCuentaDestino" class="labelSelect">???lbl_TipoCuentaDestino???</label><div class="ui-select"><div id="transferenciaIntroducirDatosForm:tipoCuentaDestino-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow valid"><span>A una cuenta habitual</span><select id="transferenciaIntroducirDatosForm:tipoCuentaDestino" name="transferenciaIntroducirDatosForm:tipoCuentaDestino" size="1" tabindex="4">  <option value="misCuentas" selected="selected">A una de mis cuentas</option>
<option value="cuentasHabituales">A una cuenta habitual</option>
<option value="otraCuenta">A otra cuenta</option>

                        <li data-role="fieldcontain" class="sinBordeSeparador otraCuenta ui-field-contain ui-li-static ui-body-inherit" style="display: none;">
                            <label for="tipoTransferencia" class="labelSelect">Tipo de transferencia</label><div class="ui-select"><div id="transferenciaIntroducirDatosForm:tipoOtraCuenta-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"><span>Nacional</span><select id="transferenciaIntroducirDatosForm:tipoOtraCuenta" name="transferenciaIntroducirDatosForm:tipoOtraCuenta" size="1" tabindex="5">    <option value="N" selected="selected">Nacional</option>
<option value="E">Extranjero</option>

                        <li data-role="fieldcontain" class="sinBordeSeparador misCuentas ui-field-contain ui-li-static ui-body-inherit" style="display: none;">
                            <label for="cuentaDestino" class="labelSelect">Cuenta destino</label><div class="ui-select"><div id="transferenciaIntroducirDatosForm:cuentaDestinoMiCuenta:cuentaDestinoMiCuenta-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"><span class="{validate:{required:true,notEquals:['transferenciaIntroducirDatosForm:cuentaOrigen:cuentaOrigen','Cuenta origen','Cuenta destino']}}">Selecciona una de mis cuentas</span><select id="transferenciaIntroducirDatosForm:cuentaDestinoMiCuenta:cuentaDestinoMiCuenta" name="transferenciaIntroducirDatosForm:cuentaDestinoMiCuenta:cuentaDestinoMiCuenta" class="{validate:{required:true,notEquals:['transferenciaIntroducirDatosForm:cuentaOrigen:cuentaOrigen','Cuenta origen','Cuenta destino']}}" size="1" data-theme="" tabindex="6">   <option value="">Selecciona una de mis cuentas</option>

                        <li data-role="fieldcontain" class="cuentasHabituales ui-field-contain ui-li-static ui-body-inherit" style="display: block;">
                            <label for="remitente">Cuenta destino</label><div class="ui-select"><div id="transferenciaIntroducirDatosForm:cuentaDestinoHabitual-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"><span class="{validate:{required:true}}">Selecciona una cuenta habitual</span><select id="transferenciaIntroducirDatosForm:cuentaDestinoHabitual" name="transferenciaIntroducirDatosForm:cuentaDestinoHabitual" class="{validate:{required:true}}" size="1" tabindex="7">  <option value="">Selecciona una cuenta habitual</option>

                        <li data-role="fieldcontain" class="sinBordeSeparador otraCuenta ui-field-contain ui-li-static ui-body-inherit" style="display: none;"> 

                            <label for="alias">Iban</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input id="transferenciaIntroducirDatosForm:cuentaDestino" type="number" name="transferenciaIntroducirDatosForm:cuentaDestino" class="{validate:{required: true, cuentaOIbanValido:true}} controlVal controlCuentaDestino conEventos1" oninput="limitarLongitud(event,35)" onkeydown="borrarCaracterDecimal(event)" placeholder="Iban" tabindex="8"></div>
                             <span class="spacer"></span>                           
                        </li>                       

                        <li data-role="fieldcontain" class="sinBordeSeparador cuentasHabituales otraCuenta ui-field-contain ui-li-static ui-body-inherit" style="display: block;">
                            <label for="beneficiario">Nombre del beneficiario</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input id="transferenciaIntroducirDatosForm:beneficiario" type="text" name="transferenciaIntroducirDatosForm:beneficiario" class="{validate:{required:true,caracteresSepa:true,maxlength:40}} controlVal" placeholder="Nombre del beneficiario" tabindex="9" maxlength="40"></div>
                        </li>

                        <li data-role="fieldcontain" class="sinBordeSeparador misCuentas cuentasHabituales otraCuenta ui-field-contain ui-li-static ui-body-inherit" style="display: block;">
                            <label for="conceptoDestino">Concepto para el beneficiario</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input id="transferenciaIntroducirDatosForm:conceptoDestino" type="text" name="transferenciaIntroducirDatosForm:conceptoDestino" class="{validate:{required:true,caracteresSepa:true,maxlength:80}} controlVal" placeholder="Concepto para el beneficiario" tabindex="10" maxlength="80"></div>

                        </li>                                   

                        <li class="sinBordeSeparador slider otraCuenta ui-li-static ui-body-inherit" style="display: none;">
                            <label for="guardarCuentaHabitual">Guardar como cuenta habitual</label><select id="transferenciaIntroducirDatosForm:guardarCuentaHabitual" name="transferenciaIntroducirDatosForm:guardarCuentaHabitual" size="1" data-role="slider" onchange="mostrarCampoSlider(this);" tabindex="-1" class="ui-slider-switch">   <option value="false">No</option>
<option value="true">Sí</option>

中

                        <li data-role="fieldcontain" class="sinBordeSeparador aliasCuentaHabitual ui-field-contain ui-li-static ui-body-inherit" style="display: none;">
                            <label for="alias">Alias</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input id="transferenciaIntroducirDatosForm:alias" type="text" name="transferenciaIntroducirDatosForm:alias" class="{validate:{caracteresSepa:true}} controlVal" maxlength="40" placeholder="Alias" tabindex="11"></div>
                        </li>

                        <li data-role="fieldcontain" class="sinBordeSeparador grupoInternacional otraCuenta extranjero ui-field-contain ui-li-static ui-body-inherit" style="display: none;">
                            <label for="alias">NIF</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input id="transferenciaIntroducirDatosForm:nif" type="text" name="transferenciaIntroducirDatosForm:nif" class="{validate:{caracteresSepa:true}} controlVal" maxlength="10" placeholder="NIF" tabindex="12"></div>
                        </li>

                        <li data-role="fieldcontain" class="sinBordeSeparador grupoInternacional otraCuenta extranjero ui-field-contain ui-li-static ui-body-inherit" style="display: none;">
                            <label for="alias">Dirección </label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input id="transferenciaIntroducirDatosForm:direccion" type="text" name="transferenciaIntroducirDatosForm:direccion" class="{validate:{caracteresSepa:true}} controlVal" maxlength="30" placeholder="Dirección " tabindex="13"></div>
                        </li>

                        <li data-role="fieldcontain" class="sinBordeSeparador grupoInternacional otraCuenta extranjero ui-field-contain ui-li-static ui-body-inherit" style="display: none;">
                            <label for="alias">Población</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input id="transferenciaIntroducirDatosForm:poblacion" type="text" name="transferenciaIntroducirDatosForm:poblacion" class="{validate:{caracteresSepa:true}} controlVal" maxlength="30" placeholder="Población" tabindex="14"></div>
                        </li>                           

                        <li data-role="fieldcontain" class="sinBordeSeparador grupoInternacional otraCuenta extranjero ui-field-contain ui-li-static ui-body-inherit" style="display: none;">
                            <label for="alias">Código postal</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input id="transferenciaIntroducirDatosForm:codigoPostal" type="text" name="transferenciaIntroducirDatosForm:codigoPostal" class="{validate:{caracteresSepa:true,}} controlVal" maxlength="5" placeholder="Código postal" tabindex="15"></div>                             
                        </li>

                        <li data-role="fieldcontain" class="sinBordeSeparador grupoInternacional otraCuenta extranjero ui-field-contain ui-li-static ui-body-inherit ui-last-child" style="display: none;">
                            <label for="alias">BIC</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input id="transferenciaIntroducirDatosForm:bic" type="text" name="transferenciaIntroducirDatosForm:bic" class="{validate:{caracteresSepa:true}} controlVal" maxlength="15" placeholder="BIC" tabindex="16"></div>
                        </li>                                                                                                                                               

                    </ul>
                </div></div>
            </li>

Javascript：当我在字段中输入conceptoOrigen时，如果它已折叠，我将其展开，但键盘的向下箭头仍然被禁用：

            $('#transferenciaIntroducirDatosForm\\:conceptoOrigen').on('focusin', function() {
                console.log("entrando último campo.");
                if($('#datosParaQuien').hasClass('ui-collapsible-collapsed')) {
                    $('#datosParaQuien').collapsible({collapsed: false});

                }
            });

Answer 1

嗯，你没有显示任何代码，所以我可以针对你的情况，但是你说的我觉得问题是你不能把焦点放在一个不是的元素上显示。

您可以使用jquery代码处理焦点移动，因此在设置下一个焦点之前，请确保其块可见。这里有一个例子......

<强> HTML ：

<input class='yourclass' />
<br/>
<fieldset>
  <input class='yourclass' />
  <br/>
  <input class='yourclass' />
</fieldset>
<br/>
<input class='yourclass' />
<br/>
<input class='yourclass' />

<强> CSS ：

fieldset { display: none; }
.uncollapse { display: block; }

<强> JQUERY ：

var lastInputPos = $(".yourclass").length - 1;

$(document).keydown(function(e) {

    if ( (e.keyCode == 38) || (e.keyCode == 40) ) { // Arrow UP&Down Keys.

        var focusPos = $('.yourclass').index($('.yourclass:focus'));
        var $nextFocusInput = null;

        if ( (e.keyCode == 40) && (focusPos < lastInputPos) )  // Key Arrow Down.
            $nextFocusInput = $('.yourclass').eq(focusPos+1);
        else if ( (e.keyCode == 38) && (focusPos > 0) )  // Key Arrow Up.
            $nextFocusInput = $('.yourclass').eq(focusPos-1);

        if ($nextFocusInput != null) {
            /* CODE FOR UNCOLLAPSING THE BLOCK OF THE NEXT INPUT FOCUSED */
            $('fieldset').removeClass('uncollapse');
            $nextFocusInput.closest('fieldset').addClass('uncollapse');
            /* ----------------------------------------------------- */
            $nextFocusInput.focus();
        }
    }
});

相应的小提琴...... https://fiddle.jshell.net/rigobauer/798xny8n/1/

我认为你可以得到这个想法并使其适应你的情况。下次记得显示你的代码，以便更容易地帮助你。

我希望它有所帮助

当折叠块时，具有可折叠块的窗体无法聚焦

1 个答案: