在 JQuery UI 对话框中输入键行为
Posted
技术标签:
【中文标题】在 JQuery UI 对话框中输入键行为【英文标题】：Enter Key Behaviour in JQuery UI Dialog 【发布时间】：2012-08-24 11:02:18 【问题描述】：如何修改下面的代码，以便在按下回车键时，jQuery 日期选择器将做出反应并将变量 (datePickerValue) 设置为自动突出显示的日期，即打开 jQuery 时的当前日期.我希望能够打开日期选择器，快速按回车键，它只需要当前日期并将其存储到 var 中。
<html>
<head>
<!-- LOAD JQUERY LIBRARY: -->
<link href="jq/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="jq/jquery.min.js" type="text/javascript"> </script>
<script src="jq/jquery-ui.min.js" type="text/javascript"> </script>
<script type="text/javascript">
window.onload = function()
$('#dd').dialog(
autoOpen: true,
modal: true,
overlay: opacity: 0.5, background: 'black',
title: 'Select the date:',
height: 215,
width: 234,
draggable: false,
resizable: false
);//end of dialog_atip
var datePickerValue = ""
$("#d1").show().unbind().datepicker().datepicker("show").change(function ()
//$('#d1').datepicker(onSelect:datePickerValue = $(this).val() ).hide();
$('#d1').datepicker(onSelect:datePickerValue = $(this).val() )
alert("You picked: " + datePickerValue);
$("#dd").dialog("close")
);
//end of window.onload
</script>
</head>
<body>
<div style="display:none" id="dd">
<div id="d1">
</div>
</body>
</html>
【问题讨论】：
您可以做的是，在 #d1 上为 keycode == 13 添加一个侦听器，然后单击 enter 上的当前链接。 【参考方案1】：活动元素具有.ui-state-active 类，因此您可以在按下回车键时模拟对该元素的点击，如下所示：
$(document).on('keypress', function (e)
if(e.which == 13)
$('.ui-state-active').click();
);
这是fiddle。焦点必须在文档上才能在那里工作（单击输出上的任意位置，然后按 Enter 键）。
【讨论】：
这很好用。但是，有没有办法让 enter 键仅在焦点位于对话框窗口而不是整个 html 文档时才起作用？ 当然，因为对话框是模态的，你可以检查它是否打开。if(e.which === 13 && $('#dd').dialog('isOpen') === true)jsfiddle.net/9hUsU/3以上是关于在 JQuery UI 对话框中输入键行为的主要内容，如果未能解决你的问题，请参考以下文章
为啥 jQuery UI 日期选择器在 jQuery 对话框模式中不起作用？