我有一个带有日期字段的表单,附带了一个jquery datepicker。
当我选择日期字段时,弹出日期选择器,然后iPad键盘滑入视图并遮挡日期选择器。
在这种情况下如何防止键盘弹出?
我使用了Rob Osborne解决方案的略微修改版本,它成功地阻止了键盘在iPad和iPhone上弹出。
$(".datePicker").datepicker({
showOn: 'button',
onClose: function(dateText, inst)
{
$(this).attr("disabled", false);
},
beforeShow: function(input, inst)
{
$(this).attr("disabled", true);
}
});
我相信在现代浏览器中更好的方法是使用inputmode =“none”。这是HTML代码:
<input type="text" ... inputmode="none" />
至少在Android Chrome上,这是允许我的日期选择器(显然是通过jQuery单独初始化)出现在我的手机上,软键盘没有出现。
这可以防止使字段只读(不能清除值等)可能出现的问题
使用最新版本的DatePicker,可以这样做:
//for tablets / phones
$('#yourElement').datepicker().on('show', function (e) {
$(this).trigger('blur');
})
但请注意,键盘可能会在屏幕底部闪烁一秒钟,直到执行blur()。
而不是禁用输入给它一个“只读”属性。这比禁用它更好,因为您可以保存表单而不更改它。
这里有更多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>
没有找到一种方法来做到这一点,但我最终使用了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,
...
现在三个小时,无处可去。我没有Iphone所以我在运行2.3的Android手机上尝试以上操作。
在我的手机上我每次都会得到键盘,没有任何阻止它,我不能使用'只读',因为它停止我的asp.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
我发现使用以下(感谢上面的海报)将模糊焦点并停止显示键盘的手机(至少我的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..}
我还可以运行默认弹出的日期选择器,并使用我的代码隐藏函数来填充另一个文本框,其结束日期为7天。
这似乎只适用于手机!在浏览器中它会抛出“对象引用未设置为对象的实例”,因为asp.net已经确定在回发后TextBox不存在但运行JavaScript。离开主题所以不再说了。
所有排序现在:),用<script>..</script>
包围我的<Div>
并且只有当需要运行JavaScript
代码时才能看到它,当我检测到它是移动设备时,通过使用:
bool IsMobile = Page.Request.Browser.IsMobileDevice;
和
if (IsMobile == true)
{
mobileScript.Visible = true;
}
干杯
崔佛。
我相信这个解决方案适用于所有不同的日期时间选择器,但我只用date picker from XDSoft测试它。
我的想法是在pointer-events: 'none'
元素上禁用鼠标事件(input
),这样键盘就不会出现,然后在包裹onclick
元素的父div
上添加一个input
事件。然后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.$);
我已经使用过这段代码而且效果很好......“。hasDatepicker”类用于保存日期选择器的输入
<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');
}
);
});
});