0

フォームフィールドのフォーカスイベントを定義して、選択するオプションを含むJqueryUIダイアログを開きます。中断のないデータ入力のために、同じフィールドに焦点を合わせておく必要があります。私の要件は、datepickerで示されているものと同じです。ユーザーには、datepickerオーバーレイが表示されますが、ユーザーが日付を入力し続けることができるように、フォーカスは日付フィールドに留まります。

関連するフィールドとダイアログのコードは次のとおりです。

$( "#pmt_code" ).focus(function(){
    $( "#pmtcodes" ).dialog( "open" );
    // Keep focus stayed on this field somehow
  });


$( "#pmtcodes" ).dialog({
    autoOpen: false,
    position: { my: "left top", at: "left bottom", of: $("#pmt_code") },
    closeOnEscape: true,
    open: function(){
      listPmtCodes();
    }        
  });

これがテーブル付きのDialogDivです。jquerydatatableプラグインを使用してこのテーブルにデータを入力しています。

<div id="pmtcodes" title="payment Codes">
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="pmtCodesTable">
        <thead>
          <tr>
            <th>Code</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>        
    </div>
4

1 に答える 1

0

オープンコールバックで、コントロールにフォーカスを再度設定する必要があります。

var $pmt_code = $("#pmt_code"),
    $pmtcodes = $("#pmtcodes");

$pmt_code.focus(function(){
    !$pmtcodes.dialog( "isOpen" ) && $pmtcodes.dialog( "open" );
});

$pmtcodes.dialog({
    autoOpen: false,
    position: { 
        my: "left top", 
        at: "left bottom", 
        of: $pmt_code 
    },
    closeOnEscape: true,
    open: function(){
        listPmtCodes();
        setTimeout(function () { // Workaround for Internet Explorer
            $pmt_code.focus(); //<---- Keep focus stayed on this field somehow
        }, 10);
    }
 });

要素ごとに1回以上DOMを検索しないように、コードを少し変更しました。

また、ダイアログを閉じるために押されたESCをキャッチするためにkeyupイベントを実装する必要があります。

$pmt_code.keyup(function (e) {
    if (e.keyCode == 27 && $pmtcodes.dialog("isOpen")) // ESC pressed
    {
        $pmtcodes.dialog("close");
    }
});

ここでライブをチェックしてください：http：//jsfiddle.net/9KuVA/

これがお役に立てば幸いです

于 2013-01-11T19:17:39.257 に答える