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

【问题标题】：ipad web application: How do I prevent the keyboard from popping up on jquery datepickeripad web应用程序：如何防止键盘在jquery datepicker上弹出
【发布时间】：2011-04-02 03:26:37
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery ipad jquery-ui-datepicker

【解决方案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);
    }
});

【讨论】：

这对我没有任何影响
记住答案的年龄。它很可能不再起作用了。如果您找到解决方案，请告诉我，我可以更新它。
这对我有用。添加选项 buttonText: "my val" 以更改按钮文本。

【解决方案2】：

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

这里有更多info about readonly。

【讨论】：

除非有充分的理由允许用户在日期选择器文本字段中输入内容，否则这是最简单的解决方案。
今天仍然是一个有效的答案。我遇到了“键盘优先”问题并将日期字段设置为“只读”解决了它。谢谢！
如果同时使用引导程序的日期选择器，这有一个优势，很好的解决方案！
不行！它不可点击！图标也不是。

【解决方案3】：

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

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

在我发现的许多其他解决方案没有的地方对我很有效！

【讨论】：

【解决方案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 键盘的输入字段来手动编辑日期，或者通过单击日期按钮使用日期选择器。

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

【讨论】：

【解决方案5】：

如果您使用的是date-timepicker，则“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>

【讨论】：

这是在 datetimepicker 上对我来说非常有效的方法谢谢！

【解决方案6】：

没有找到一种方法来做到这一点，但我最终使用了一种可接受的解决方法，即使用 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,
     ...

【讨论】：

【解决方案7】：

现在三个小时了，一无所获。我没有 Iphone，所以我在运行 2.3 的 android 手机上尝试上述操作。

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

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

干杯

更新

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

似乎不会触发 Javascript 或 JQuery，因为它在服务器端分配了一个“特殊”ID，例如“ctl00_content.....”，这不是t 与 JQuery 代码中的“#something”相同。但是感谢使用此帖子的反复试验：-

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>

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

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

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

更新 2

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

更新 3 - 我的答案

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

bool IsMobile = Page.Request.Browser.IsMobileDevice;

和

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

干杯

Trev.

【讨论】：

我认为这值得一票，因为它是 web 表单的元元解决方法，获得 HTML 解决方法，解决 ipad，在 HTML 表单 hack UI 小部件上，获得体面的 UI为用户。我也很高兴我在甜蜜甜蜜的 5 年里没有听说过“代码隐藏”或“回发”这些术语。

【解决方案8】：

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

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

代码示例

这演示了如何在使用 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.$);

【讨论】：

【解决方案9】：

我用过这段代码，效果很好…… “.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');

          }
        );

});
});

【讨论】：

【解决方案10】：

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

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

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

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

【讨论】：

【解决方案11】：

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

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

但请注意，在执行 blur() 之前，键盘可能会在屏幕底部闪烁一秒钟。

【讨论】：

'focus' 事件发生在'show' 之前，您应该尝试使用它来避免闪烁 ;)