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

ipad web application: How do I prevent the keyboard from popping up on jquery datepicker

提问by Rob Osborne

I have a form with an date field with a jquery datepicker attached to it.

我有一个带有日期字段的表单，其中附加了一个 jquery 日期选择器。

When I select the date field the datepicker pops up but then the iPad keyboard slides into view and obscures the datepicker.

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

How do I prevent the keyboard from popping up in this situation?

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

采纳答案by cdeutsch

I used a slightly modified version of Rob Osborne's solution and it successfully prevented the keyboard from popping up on the iPad and iPhone.

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

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

回答by Miriam Salzer

Instead of disabling the input give it a "readonly" property. This is better then disabling it because you can save the form without changing it.

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

Here is more info about readonly.

这是有关 readonly 的更多信息。

回答by rAthus

That's how I managed to deal with this problem by making the browser think the user blured the input so it hides the keyboard before it has time to show :

这就是我设法通过让浏览器认为用户模糊输入从而在它有时间显示之前隐藏键盘来处理这个问题的方法：

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

Works well for me where many of the other solutions I found didn't !

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

回答by divby1

I used a combination of CDeutsch and Rob's answers to disable the input field when the user clicks the calendar and then enable the field after the date picker closes as follows:

我结合使用 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
});

The benefit is that this allows the user to edit the date manually by clicking in the input field which brings up the iPad's keyboard or use the date picker by clicking on the date button.

这样做的好处是，这允许用户通过单击打开 iPad 键盘的输入字段来手动编辑日期，或者通过单击日期按钮使用日期选择器。

Again thanks for all of the great input on this problem, I was stuck on this same issue until reading the above posts.

再次感谢所有关于这个问题的伟大投入，在阅读上述帖子之前，我一直被困在这个问题上。

回答by Jorgos

If you're using the date-timepickerthe 'beforeShow' option is not available. Only adding the 'readonly' attribute to the input filed will completely disable the date picker.

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

Solution is to use the 'readonly' attribute on the element and add 'ignoreReadonly: true' as an option for the date picker.

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

回答by Rob Osborne

Didn't discover a way to do this but I ended up using an acceptable work around of using the buttonImage feature with buttonImageOnly and then disabling the date field.

没有找到一种方法来做到这一点，但我最终使用了一个可接受的解决方法，即使用 buttonImage 功能和 buttonImageOnly 然后禁用日期字段。

$("#id_date").datepicker({
        dateFormat: 'yy/mm/dd',
        showOn:"button",
        buttonImage: "/icons/calendar.gif",
        buttonImageOnly: true });
$('#id_date').attr("disabled", true);

If you are doing this on a form, make sure you re-enable the field before submitting or serializing the form or the value won't be sent (on iPad at least). I do the following in my submit function:

如果您在表单上执行此操作，请确保在提交或序列化表单之前重新启用该字段，否则不会发送值（至少在 iPad 上）。我在提交功能中执行以下操作：

$('#id_date').attr("disabled", false);
var dataString = $('#the_form').serialize();
$.ajax({
     type: "POST",
     url: 'myurl',
     data: dataString,
     ...

回答by Vegard

I believe this solution could work for all different date time pickers, but I have only tested it with the date picker from XDSoft.

我相信此解决方案适用于所有不同的日期时间选择器，但我仅使用XDSoft的日期选择器对其进行了测试。

The idea is to disable mouse events (pointer-events: 'none') on the inputelement so that the keyboard won't appear, and then add a onclickevent on a parent divthat wraps around the inputelement. The onclickevent should then open the date time picker.

这个想法是pointer-events: 'none'在input元素上禁用鼠标事件 ( )以便键盘不会出现，然后onclick在div环绕input元素的父级上添加一个事件。然后onclick事件应该打开日期时间选择器。

Code Example

代码示例

This demonstrates how to fix the issue when using XDSoft's datetimepicker.

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

The solution assumes that the inputelement is wrapped inside a divelement.

该解决方案假定该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.$);

回答by Yossi Ben-david

I have used this code and it works great... ".hasDatepicker" class is for my input that hold the date picker

我使用过这段代码，效果很好......“.hasDatepicker”类用于我的输入，用于保存日期选择器

<script type="text/javascript">

jQuery( document ).ready(function() {

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');

          }
        );

});
});

回答by Peter Bowers

I believe the better way to do this in modern browsers is to use inputmode="none". Here's the HTML code:

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

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

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

At least on Android Chrome this is allowing my datepicker (obviously separately initialized via jQuery) to come up on my phone and the soft keyboard does notcome up.

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

This prevents the issues that are possible with making the field readonly (not being able to clear the value, etc)

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

回答by FlashTrev

Three hours in now and getting nowhere. I don't have an Iphone so i'm trying the above on an android phone running 2.3.

现在三个小时了，无处可去。我没有 Iphone，所以我正在运行 2.3 的 Android 手机上尝试上述操作。

On my phone I still get the keypad everytime, nothing stops it and I can't use 'read only' as it stops my asp.net4 / C# code behind firing, which is a bit cr#p but that's how it is.

在我的手机上，我仍然每次都能得到键盘，没有什么能阻止它，我不能使用“只读”，因为它会阻止我的 asp.net4/C# 代码在触发之后，这有点 cr#p，但就是这样。

So my initial question is do these ideas only work on Iphones?

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

cheers

干杯

Update

更新

I've found a way to make the above answers work for ASP.Net 4. so thought I would share.

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

Seems that < asp:TextBox ID="something" ...> doesn't fire Javascript or JQuery as it's assigned a 'special' ID like "ctl00_content....." on the server side, which isn't the same as "#something" in the JQuery code. But thanks to trial and error using this posting:-

似乎 < asp:TextBox ID="something" ...> 不会触发 Javascript 或 JQuery，因为它在服务器端分配了一个“特殊”ID，如“ctl00_content.....”，这是不一样的作为 JQuery 代码中的“#something”。但多亏了使用这篇文章的反复试验：-

Retrieve value from asp:textbox with JQuery

使用 JQuery 从 asp:textbox 检索值

I worked out that using the following (with thanks to above poster) will blur the focus and stop mobile phones showing the keyboard (atleast my Android anyway :)

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

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

so the following simple example code used with the JQuery above should hopefully help others:

因此，与上面的 JQuery 一起使用的以下简单示例代码应该可以帮助其他人：

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

Of course 'sDatepicker_changed' is your code behind code.

当然 'sDatepicker_changed' 是你的代码背后的代码。

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

I can also run the datepicker pop up still and use my code behind function to populate another textbox with an end date 7 days from this one.

我还可以仍然运行 datepicker 弹出窗口，并使用我的代码隐藏函数填充另一个文本框，其结束日期距此文本框 7 天。

Update 2

更新 2

It would seem this only works in mobile phones! in a browser it throws an "Object reference not set to an instance of an object" because asp.net has decided the TextBox doesn't exist after a postback but runs JavaScript. Getting off topic so won't say anymore.

这似乎只适用于手机！在浏览器中，它会抛出“未将对象引用设置为对象的实例”，因为 asp.net 已决定在回发后 TextBox 不存在但运行 JavaScript。跑题了就不多说了。

Update 3 - My Answer

更新 3 - 我的答案

All sorted now :) , have surrounded my <script>..</script>with a <Div>and only make it visible if need to run the JavaScriptcode, when I have detected it is a mobile device, by using:

现在全部排序 :) ，<script>..</script>用 a包围我，<Div>并且仅在需要运行JavaScript代码时才使其可见，当我检测到它是移动设备时，使用：

bool IsMobile = Page.Request.Browser.IsMobileDevice;

and

和

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

cheers

干杯

Trev.

特雷夫。