Question

我有一个带有日期字段的表单，并附加了一个jquery datepicker。

当我选择日期字段时，弹出日期选择器，然后iPad键盘滑入视图并遮挡日期选择器。

在这种情况下如何防止键盘弹出？

Answer 1

我使用了Rob Osborne解决方案的略微修改版本，它成功地阻止了键盘在iPad和iPhone上弹出。

$(".datePicker").datepicker({
    showOn: 'button',
    onClose: function(dateText, inst) 
    { 
        $(this).attr("disabled", false);
    },
    beforeShow: function(input, inst) 
    {
        $(this).attr("disabled", true);
    }
});

Answer 2

不是禁用输入，而是给它一个“只读”属性。这比禁用它更好，因为您可以保存表单而不更改它。

这里有更多info about readonly。

Answer 3

这就是我设法解决这个问题的方法，让浏览器认为用户模糊了输入，以便在有时间显示之前隐藏键盘：

$('blabla')
    .datepicker(
    {
        /* options */
    })
    .on('focus',function()
    {
        $(this).trigger('blur');
    });

对我来说效果很好，我找到的许多其他解决方案都没有！

Answer 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的键盘，也可以通过点击日期按钮来使用日期选择器。

再次感谢关于这个问题的所有重要意见，在阅读上述帖子之前，我一直坚持同样的问题。

Answer 5

如果您使用date-timepicker，则'beforeShow'选项不可用。仅将“readonly”属性添加到输入字段将完全禁用日期选择器。

解决方案是在元素上使用'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>

Answer 6

没有找到一种方法可以做到这一点，但我最终使用了buttonImageOnly使用buttonImage功能然后禁用日期字段的可接受的工作。

$("#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,
     ...

Answer 7

现在三个小时无处可去。我没有iPhone，所以我在运行2.3的Android手机上尝试上述功能。

在我的手机上，我每次都会拿到键盘，没有任何阻止它，我无法使用“只读”＃39;因为它停止我的asp.net4 / C＃代码后面的触发，这有点cr＃p但是它是怎么回事。

所以我最初的问题是这些想法只适用于Iphone吗？

欢呼声

更新

我找到了一种方法可以让上述答案适用于ASP.Net 4.所以我想分享。

似乎＆lt; asp：TextBox ID =＆＃34;某事＆＃34; ...＆GT;并没有解雇Javascript或JQuery，因为它已经分配了一个特殊的＆＃39; ID喜欢＆＃34; ctl00_content .....＆＃34;在服务器端，它与＆＃34; #thing＆＃34;相同。在JQuery代码中。但是由于使用此帖子的反复试验： -

Retrieve value from asp:textbox with JQuery

我发现使用以下内容（感谢上面的海报）会模糊焦点并停止显示键盘的手机（至少我的Android：）

$("#<%=sDatepicker.ClientID%>").focus(function () {
        $(this).blur();
    });

所以下面的JQuery使用的以下简单示例代码应该有希望帮助其他人：

<asp:TextBox ID="sDatepicker" OnTextChanged="sDatepicker_changed" AutoPostBack="True" ReadOnly="False"></asp:TextBox>

当然＆＃39; sDatepicker_changed＆＃39;是代码背后的代码。

 protected void sDatepicker_changed(object sender, EventArgs e)
{//do stuff here..}

我还可以运行默认弹出的日期选择器，并使用我的代码隐藏函数来填充另一个文本框，其结束日期为7天。

更新2

这似乎只适用于手机！在浏览器中，它会抛出一个未设置为对象实例的＆＃34; Object引用＆＃34;因为asp.net已经决定TextBox在回发后不存在但运行JavaScript。离开主题所以不再说了。

更新3 - 我的答案

现在全部排序:)，我的<script>..</script>已被<Div>包围，只有在需要运行JavaScript代码时才会显示，当我检测到它是移动设备时，使用：

bool IsMobile = Page.Request.Browser.IsMobileDevice;

和

if (IsMobile == true)
{                
    mobileScript.Visible = true;
}

欢呼声

崔佛。

Answer 8

我相信这个解决方案适用于所有不同的日期时间选择器，但我只使用date picker from XDSoft进行了测试。

我们的想法是禁用pointer-events: 'none'元素上的鼠标事件（input），以便键盘不会出现，然后在父{{1}上添加onclick事件包裹div元素。然后input事件应该打开日期时间选择器。

代码示例

这演示了如何在使用 XDSoft的datetimepicker 时解决问题。

解决方案假定onclick元素包含在input元素内。

div

Answer 9

我使用过此代码，效果很好...... ＆＃34; .hasDatepicker＆＃34; class是我输入的日期选择器

<script type="text/javascript">

jQuery（document）.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');

          }
        );

});
});

Answer 10

我相信在现代浏览器中执行此操作的更好方法是使用inputmode =“ none”。这是HTML代码：

<input type="text" ... inputmode="none" />

至少在Android Chrome上，这允许我的日期选择器（显然是通过jQuery单独初始化的）出现在我的手机上，而软键盘没有出现。

这可以防止将字段设置为只读（无法清除值等）可能引起的问题

Answer 11

使用最新版本的DatePicker，可以这样做：

//for tablets / phones
    $('#yourElement').datepicker().on('show', function (e) {
        $(this).trigger('blur');
    })

但请注意，键盘可能会在屏幕底部闪烁一秒钟，直到执行模糊（）。

ipad web应用程序：如何防止键盘在jquery datepicker上弹出

11 个答案:

更新

更新2

更新3 - 我的答案