我有一个带有日期字段的表单，上面附加了一个 jquery datepicker。
当我选择日期字段时，日期选择器会弹出，但 iPad 键盘会滑入视图并遮盖日期选择器。
在这种情况下如何防止键盘弹出？
问问题
38451 次
11 回答
29
我使用了 Rob Osborne 解决方案的略微修改版本，它成功地防止了键盘在 iPad 和 iPhone 上弹出。
$(".datePicker").datepicker({
showOn: 'button',
onClose: function(dateText, inst)
{
$(this).attr("disabled", false);
},
beforeShow: function(input, inst)
{
$(this).attr("disabled", true);
}
});
于 2010-11-19T15:14:44.410 回答
24
与其禁用输入，不如给它一个“只读”属性。这比禁用它更好，因为您可以保存表单而不更改它。
于 2011-07-29T03:59:47.730 回答
11
这就是我设法通过让浏览器认为用户模糊了输入来解决这个问题的方法，因此它在有时间显示之前隐藏了键盘：
$('blabla')
.datepicker(
{
/* options */
})
.on('focus',function()
{
$(this).trigger('blur');
});
在我发现的许多其他解决方案没有的情况下，对我来说效果很好！
于 2014-02-05T20:30:00.700 回答
4
当用户单击日历时，我结合使用 CDeutsch 和 Rob 的答案来禁用输入字段，然后在日期选择器关闭后启用该字段，如下所示：
$(".date").datepicker({
showOn: "button",
onClose: function(dateText, inst) { $(this).attr("disabled", false); },
beforeShow: function(dateText, inst) { $(this).attr("disabled", true); },
buttonImage: "/images/calendar.png",
buttonImageOnly: true
});
好处是，这允许用户通过单击显示 iPad 键盘的输入字段手动编辑日期，或通过单击日期按钮使用日期选择器。
再次感谢所有关于这个问题的重要意见，在阅读上述帖子之前，我一直被困在同一个问题上。
于 2010-12-14T16:07:31.230 回答
4
如果您使用日期时间选择器，则“beforeShow”选项不可用。仅将“只读”属性添加到输入字段将完全禁用日期选择器。
解决方案是在元素上使用 'readonly' 属性并添加 'ignoreReadonly: true' 作为日期选择器的选项。
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'MM-DD-YYYY',
minDate: moment(),
ignoreReadonly: true
});
});<div class='input-group date' id='datetimepicker1'>
<input type='text' id="date" readonly style="cursor: default; background-color: #fff" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>于 2015-07-30T14:55:20.173 回答
1
没有找到一种方法来做到这一点，但我最终使用了一种可接受的解决方法，即使用 buttonImage 功能和 buttonImageOnly，然后禁用日期字段。
$("#id_date").datepicker({
dateFormat: 'yy/mm/dd',
showOn:"button",
buttonImage: "/icons/calendar.gif",
buttonImageOnly: true });
$('#id_date').attr("disabled", true);
如果您在表单上执行此操作，请确保在提交或序列化表单之前重新启用该字段，否则将不会发送值（至少在 iPad 上）。我在提交功能中执行以下操作：
$('#id_date').attr("disabled", false);
var dataString = $('#the_form').serialize();
$.ajax({
type: "POST",
url: 'myurl',
data: dataString,
...
于 2010-09-18T19:21:13.280 回答
0
现在三个小时，一无所获。我没有 Iphone，所以我在运行 2.3 的 android 手机上尝试上述操作。
在我的手机上，我仍然每次都能得到键盘，没有什么能阻止它，我不能使用“只读”，因为它会阻止我的 asp.net4 / C# 代码在触发后停止，这有点 cr#p 但就是这样。
所以我最初的问题是这些想法是否只适用于 Iphone？
干杯
更新
我找到了一种使上述答案适用于 ASP.Net 4 的方法。所以我想我会分享。
似乎 < asp:TextBox ID="something" ...> 不会触发 Javascript 或 JQuery，因为它在服务器端分配了一个“特殊”ID，例如“ctl00_content.....”，这不一样作为 JQuery 代码中的“#something”。但是由于使用此帖子的反复试验：-
我发现使用以下内容（感谢上面的海报）会模糊焦点并停止手机显示键盘（至少我的 Android :)
$("#<%=sDatepicker.ClientID%>").focus(function () {
$(this).blur();
});
因此，与上面的 JQuery 一起使用的以下简单示例代码有望对其他人有所帮助：
<asp:TextBox ID="sDatepicker" OnTextChanged="sDatepicker_changed" AutoPostBack="True" ReadOnly="False"></asp:TextBox>
当然，'sDatepicker_changed' 是您的代码背后的代码。
protected void sDatepicker_changed(object sender, EventArgs e)
{//do stuff here..}
我还可以继续运行 datepicker 弹出窗口，并使用我的代码隐藏函数来填充另一个文本框，其结束日期为距该文本框 7 天。
更新 2
看来这只适用于手机！在浏览器中，它会抛出“对象引用未设置为对象的实例”，因为 asp.net 已确定回发后 TextBox 不存在但运行 JavaScript。跑题了就不多说了。
更新 3 - 我的答案
<script>..</script>现在全部排序:)，用 a包围了我，<Div>并且只有在需要运行代码时才使其可见JavaScript，当我检测到它是移动设备时，使用：
bool IsMobile = Page.Request.Browser.IsMobileDevice;
和
if (IsMobile == true)
{
mobileScript.Visible = true;
}
干杯
特雷夫。
于 2015-01-31T16:07:33.970 回答
0
我相信此解决方案适用于所有不同的日期时间选择器，但我只使用XDSoft 的日期选择器对其进行了测试。
这个想法是禁用元素pointer-events: 'none'上的鼠标事件 ( )，input这样键盘就不会出现，然后在环绕元素onclick的父级上添加一个事件。然后该事件应打开日期时间选择器。divinputonclick
代码示例
这演示了如何在使用XDSoft 的 datetimepicker时解决问题。
该解决方案假定input元素被包裹在一个div元素内。
(function($){
var originalDateTimePicker = $.fn.datetimepicker;
$.fn.datetimepicker = function(args){
this.each(function(i, dateTimePicker){
dateTimePicker = $(dateTimePicker);
dateTimePicker.closest('div').on('click', function(e){
dateTimePicker.trigger('open');
});
dateTimePicker.css({ 'pointer-events': 'none' });
});
return originalDateTimePicker.apply(this, arguments);
};
})(window.jQuery||window.$);
于 2016-11-07T12:54:09.303 回答
0
我已经使用了这段代码并且效果很好......“.hasDatepicker”类用于保存日期选择器的输入
<script type="text/javascript">
jQuery( 文档 ).ready(function() {
var ybdDatePick = jQuery( ".hasDatepicker" );
jQuery(function() {
ybdDatePick.datepicker({ }).attr('readonly','readonly');
ybdDatePick.on('focus',function() {
jQuery(this).trigger('blur');
this.datepicker({ }).attr('readonly','readonly');
}
);
});
});
于 2017-10-23T09:42:34.760 回答
0
我相信在现代浏览器中更好的方法是使用 inputmode="none"。这是HTML代码：
<input type="text" ... inputmode="none" />
至少在 Android Chrome 上，这允许我的日期选择器（显然是通过 jQuery 单独初始化）出现在我的手机上，而软键盘没有出现。
这可以防止将字段设为只读时可能出现的问题（无法清除值等）
于 2019-04-03T09:39:15.873 回答
-1
使用最新版本的 DatePicker，可以这样做：
//for tablets / phones
$('#yourElement').datepicker().on('show', function (e) {
$(this).trigger('blur');
})
但是请注意，在执行 blur() 之前，键盘可能会在屏幕底部闪烁一秒钟。
于 2014-06-19T09:53:35.973 回答