1

JQM 1.3.2 / ASP.NET MVC 4

値を選択すると、フォーカスが入力フィールドに正しく設定されません。何が欠けていますか?

周囲の典型的な jqm-shadow は選択から削除されず、入力はシャドウ効果を取得しますが、カーソルは入力フィールドに設定されません。

JavaScript:

$('#IndexScanPage').on('change', '#locationCode', function (e) {
    $('#locationCode').blur();
    $('#_inputEAN').focus();
});

HTML コードの一部:

<div id="IndexScanPage">
    <select name="locationCode" id="locationCode" data-native-menu="false" data-icon="home">
        <option value='' data-placeholder="true">Lagerauswahl</option>
        @{
            foreach ( var location in Model.Locations)
            {
                <option value='@location.LocationCode'>@location.LocationDescription</option> 
            }
        }
    </select>

    <div class="ui-grid-solo">
        <div class="ui-block-a">
            <input id="_inputEAN" name="barcode" data-clear-btn="true" autocomplete="off" autofocus required />
            <div class="spacer"></div>
            <input type="submit" name="submitButton" id="submitButton" value="Weiter" data-role="button" data-iconpos="right" data-icon="search" />
        </div>
    </div>
</div>

編集：

@Omar からフィドルを拡張しました: http://jsfiddle.net/tronc/qMjy9/1/

追加ボタンをクリックすると、入力が正しくフォーカスされますが、スクリプト コードが機能しないのはなぜですか?

4

1 に答える 1

2

selectmenu を使用するとdata-native-menu="false"、それがポップアップに変換され、ネイティブの selectmenu が非表示になります。

オプションを選択すると、いくつかの段階を経ます。

  • ポップアップが閉じている/非表示になっている
  • ネイティブ selectmenu が更新されました
  • jQM 仮想 selectmenu テキストが更新されました
  • jQM 仮想 selectmenu がフォーカスされる

したがって、上記のすべての手順が完了するまで待つ必要があります。

$("#IndexScanPage").on('change', '#locationCode', function (e) {
  setTimeout(function () {
    $('#_inputEAN').focus();
  }, 50); // minimum value - tested on Chrome
});

デモ

于 2013-10-18T14:55:50.063 に答える