我定义了一个表单字段的焦点事件，以打开一个Jquery UI对话框，其中包含可选择的选项。我希望焦点应该停留在相同的字段，以便不间断地输入数据。我的需求就像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();
}
});
下面是对话框Div with table。我正在使用jquery datatable插件填充这个表。
<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>
必须在打开的回调中将焦点再次设置为控件：
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);
}
});
我只是稍微修改了一下代码，以避免在DOM上对每个元素进行多次搜索。
您还需要实现keyup事件来捕获为关闭对话框而按下的ESC：
$pmt_code.keyup(function (e) {
if (e.keyCode == 27 && $pmtcodes.dialog("isOpen")) // ESC pressed
{
$pmtcodes.dialog("close");
}
});
在此查看一个live:http://jsfidle.net/9kuva/
希望这能有所帮助
