保持焦点并防止除 Tab 键外的字符输入
Remain focus and prevent character input except tab key
在 jQuery 日期选择器中选择日期后,我是否可以继续关注输入元素?无论如何,我是否可以阻止用户输入任何内容,但启用 tab 键?我目前正在使用阻止默认方法,但我只需要启用 tab 键。谢谢你。
这是我目前的方法。
$('body').on('focus',".dateSem",function() {
$(this)
.datepicker({
changeMonth: true,
changeYear: true,
changeDay: true,
showButtonPanel: true,
dateFormat: 'yy/MM/dd',
showMonthAfterYear: true,
monthNames: ["01", "02", "03", "04",
"05", "06", "07", "08", "09", "10",
"11", "12"
],
monthNamesShort: ["1", "2", "3", "4",
"5", "6", "7", "8", "9", "10",
"11", "12"
],
dayNamesMin: ["日", "月", "火", "水", "木",
"金", "土"
],
minDate: new Date,
currentText: '今日を選択',
closeText: '確定',
onClose: function(dateText, inst) {
$(this).datepicker(
'setDate',
new Date(inst.selectedYear,
inst.selectedMonth,
inst.selectedDay));
}
});
$(this).keydown(function(e) {
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
我用下面的html做了一个简单的实现(请不要忘记包括jquery和jqueryui)
<label>Date pick 1</label>
<input type="text" class="mydatepicker" />
<br />
<label>Test focus</label>
<input type="text" /><br />
<label>Date pick 2</label>
<input type="text" class="mydatepicker" />
<br />
<label>Simple text to check tab focus</label>
<input type="text" />
和 javascript 代码
$('.mydatepicker')
.keydown(function(e){
if(e.keyCode==9){
return true;
}
return false;
})
.datepicker({
onSelect:function(date){
$(this).focus();
}
});
以及解释
您 select 所有具有 class .mydatepicker
的输入字段并分配一个 onkeydown 事件,在该事件中禁用所有键输入,除非键码等于 9(这意味着等于选项卡)
然后将它们也转换为日期选择器并在 onSelect 函数(在用户选择日期后运行)中调用 $(this).focus()
,其中 this
是当前输入元素
在 jQuery 日期选择器中选择日期后,我是否可以继续关注输入元素?无论如何,我是否可以阻止用户输入任何内容,但启用 tab 键?我目前正在使用阻止默认方法,但我只需要启用 tab 键。谢谢你。 这是我目前的方法。
$('body').on('focus',".dateSem",function() {
$(this)
.datepicker({
changeMonth: true,
changeYear: true,
changeDay: true,
showButtonPanel: true,
dateFormat: 'yy/MM/dd',
showMonthAfterYear: true,
monthNames: ["01", "02", "03", "04",
"05", "06", "07", "08", "09", "10",
"11", "12"
],
monthNamesShort: ["1", "2", "3", "4",
"5", "6", "7", "8", "9", "10",
"11", "12"
],
dayNamesMin: ["日", "月", "火", "水", "木",
"金", "土"
],
minDate: new Date,
currentText: '今日を選択',
closeText: '確定',
onClose: function(dateText, inst) {
$(this).datepicker(
'setDate',
new Date(inst.selectedYear,
inst.selectedMonth,
inst.selectedDay));
}
});
$(this).keydown(function(e) {
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
我用下面的html做了一个简单的实现(请不要忘记包括jquery和jqueryui)
<label>Date pick 1</label>
<input type="text" class="mydatepicker" />
<br />
<label>Test focus</label>
<input type="text" /><br />
<label>Date pick 2</label>
<input type="text" class="mydatepicker" />
<br />
<label>Simple text to check tab focus</label>
<input type="text" />
和 javascript 代码
$('.mydatepicker')
.keydown(function(e){
if(e.keyCode==9){
return true;
}
return false;
})
.datepicker({
onSelect:function(date){
$(this).focus();
}
});
以及解释
您 select 所有具有 class .mydatepicker
的输入字段并分配一个 onkeydown 事件,在该事件中禁用所有键输入,除非键码等于 9(这意味着等于选项卡)
然后将它们也转换为日期选择器并在 onSelect 函数(在用户选择日期后运行)中调用 $(this).focus()
,其中 this
是当前输入元素