iPad Web应用程序:如何防止jquery日期选择器上弹出键盘?

我使用了一个稍微修改过的RobOsborne解决方案,它成功地阻止了iPad和iPhone上的键盘弹出。

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

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

这里还有更多 info about readonly .

这就是我如何设法解决这个问题的方法,让浏览器认为用户对输入进行了蓝色处理,从而在有时间显示之前隐藏键盘:

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

在我发现的许多其他解决方案都没有的地方,我的工作很好!

我将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键盘的输入框手动编辑日期,或者通过点击日期按钮使用日期选择器。

再次感谢大家对这个问题的大力投入,直到读到上面的文章,我才被困在这个问题上。

如果你在使用 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>

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

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

三个小时过去了,什么也没得到。我没有iPhone,所以我在运行2.3的Android手机上尝试上述方法。

在我的手机上,每次我都能看到键盘,没有什么能阻止它,我也不能使用“只读”,因为它会阻止我的a s p.net4/c代码被触发,这有点CR P,但这就是它的本质。

所以我最初的问题是,这些想法是否只适用于iPhone?

干杯

更新

我找到了一种方法,可以让上面的答案适用于ASP.NET 4。所以我想我会分享。

似乎<asp:textbox id=“something”…>不会触发javascript或jquery,因为它在服务器端分配了“特殊”ID,如“ctl00_content…”,这与jquery代码中的“something”不同。但是,由于使用本文的尝试和错误:

Retrieve value from asp:textbox with JQuery

我发现使用下面的(多亏了上面的海报)会模糊焦点,并停止手机显示键盘(至少我的安卓系统是这样的)。

$("#<%=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已确定回发后文本框不存在,但运行javascript。别再谈了。

更新3-我的答案

现在全部排序:),包围了我的 <script>..</script> 用一个 <Div> 只有在需要运行 JavaScript 代码,当我检测到它是移动设备时,使用:

bool IsMobile = Page.Request.Browser.IsMobileDevice;

和

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

干杯

Trev。

我相信这个解决方案可以适用于所有不同的日期时间选择者,但我只是用 date picker from XDSoft .

想法是禁用鼠标事件( pointer-events: 'none' ) input 元素,以便键盘不会出现,然后添加 onclick 父级上的事件 div 它围绕着 输入 元素。这个 点击 然后事件应打开日期时间选取器。

代码示例

这演示了如何在使用时修复问题。 xdsoft的日期时间选取器 .

解决方案假定 输入 元素被包装在 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.$);

我用过这段代码,效果很好… “.HasDatePicker”类用于保存日期选取器的输入。

<script type="text/javascript">

jquery(document).ready(函数()。{

var ybdDatePick = jQuery( ".hasDatepicker" );

    jQuery(function() {
       ybdDatePick.datepicker({ }).attr('readonly','readonly');

       ybdDatePick.on('focus',function() {
            jQuery(this).trigger('blur');
             this.datepicker({ }).attr('readonly','readonly');

          }
        );

});
});

我相信在现代浏览器中,更好的方法是使用inputmode=“none”。这是HTML代码:

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

至少在Android Chrome上,这允许我的日期选择器(显然是通过jquery单独初始化的)出现在我的手机上,而软键盘可以。 不 发生。

这可以防止使字段为只读(无法清除值等)时可能出现的问题。

使用最新版本的日期选取器,可以这样做:

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

但是请注意,键盘可能会在屏幕底部闪烁一秒钟,直到发出blur()。