iPad的Web应用程序:我如何防止键盘popupjQuery的dateselect器
我有一个date字段与附加jQuery的dateselect器的表单。
当我selectdate字段时,popupdateselect器,但iPad键盘滑入视图中并遮挡dateselect器。
如何防止键盘在这种情况下popup?
我使用了Rob Osborne解决scheme的一个稍微修改过的版本,它成功阻止了iPad和iPhone上popup的键盘。
$(".datePicker").datepicker({ showOn: 'button', onClose: function(dateText, inst) { $(this).attr("disabled", false); }, beforeShow: function(input, inst) { $(this).attr("disabled", true); } });
而不是禁用input给它一个“只读”属性。 这是更好的禁用它,因为你可以保存表单而不改变它。
这是关于readonly的更多信息 。
这就是我通过让浏览器认为用户使input变得模糊的方法来解决这个问题的方法,所以在有时间显示之前就隐藏了键盘:
$('blabla') .datepicker( { /* options */ }) .on('focus',function() { $(this).trigger('blur'); });
对我来说很好,我find的许多其他解决scheme都没有!
我使用CDeutsch和Rob的答案的组合来禁用input字段,当用户单击日历,然后启用dateselect器closures后的字段,如下所示:
$(".date").datepicker({ showOn: "button", onClose: function(dateText, inst) { $(this).attr("disabled", false); }, beforeShow: function(dateText, inst) { $(this).attr("disabled", true); }, buttonImage: "http://img.dovov.comcalendar.png", buttonImageOnly: true });
好处是这允许用户通过点击input字段来点击iPad的键盘来手动编辑date,或者通过点击datebutton来使用dateselect器。
再次感谢所有关于这个问题的巨大投入,直到阅读上面的post,我一直被困在这个相同的问题上。
如果您使用的是date-timepicker,则“beforeShow”选项不可用。 只有将“只读”属性添加到input字段将完全禁用dateselect器。
解决方法是在元素上使用'readonly'属性,并添加'ignoreReadonly:true'作为dateselect器的选项。
$(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使用buttonImagefunction,然后禁用date字段可接受的工作。
$("#id_date").datepicker({ dateFormat: 'yy/mm/dd', showOn:"button", buttonImage: "/icons/calendar.gif", buttonImageOnly: true }); $('#id_date').attr("disabled", true);
如果您是在表单上执行此操作,请确保在提交或序列化表单之前重新启用该字段,否则将不会发送该值(至less在iPad上)。 我在提交函数中执行以下操作:
$('#id_date').attr("disabled", false); var dataString = $('#the_form').serialize(); $.ajax({ type: "POST", url: 'myurl', data: dataString, ...
现在三个小时,没有任何意义。 我没有Iphone所以我正在尝试上面的Android手机上运行2.3。
在我的手机上,我仍然每次都得到键盘,没有什么能阻止它,我不能使用“只读”,因为它阻止了我的asp.net4 / C#代码,这是有点cr#p,但是这是事实。
所以我最初的问题是这些想法是否只适用于iPhone?
干杯
更新
我已经find了一种方法来使ASP.Net 4上面的答案工作。所以想我会分享。
似乎<asp:TextBox ID =“something”…>不会触发Javascript或JQuery,因为它在服务器端分配了一个“特殊”ID,如“ctl00_content …..”,这是不一样的作为JQuery代码中的“#something”。 但多亏了试用和使用这个post的错误:
使用JQuery从asp:textbox中检索值
我研究出使用以下(感谢上面的海报)将模糊焦点,并停止显示键盘的手机(至less我的Android无论如何:)
$("#<%=sDatepicker.ClientID%>").focus(function () { $(this).blur(); });
所以以下用于JQuery的简单示例代码应该可以帮助其他人:
<asp:TextBox ID="sDatepicker" OnTextChanged="sDatepicker_changed" AutoPostBack="True" ReadOnly="False"></asp:TextBox>
当然'Datepicker_changed'是你的代码背后的代码。
protected void sDatepicker_changed(object sender, EventArgs e) {//do stuff here..}
我也可以运行datepicker仍然popup,并使用我的代码后面的函数来填充另一个文本框的结束date从这一天7天。
更新2
这似乎只适用于手机! 在浏览器中,它会抛出一个“没有设置对象实例的对象引用”,因为asp.net决定在回发后TextBox不存在,但运行JavaScript。 下车的话题不会再说了。
更新3 – 我的答案
现在所有的sorting:)已经用<Div>
包围了我的<script>..</script>
,并且只有当我检测到它是移动设备时,如果需要运行JavaScript
代码,
bool IsMobile = Page.Request.Browser.IsMobileDevice;
和
if (IsMobile == true) { mobileScript.Visible = true; }
干杯
崔佛。
我相信这个解决scheme可以适用于所有不同的date时间select器,但是我只用XDSoft中的dateselect器进行了testing 。
我们的想法是在input
元素上禁用鼠标事件( pointer-events: 'none'
),这样键盘就不会出现,然后在包围input
元素的父div
上添加一个onclick
事件。 onclick
事件应该打开date时间select器。
代码示例
这演示了如何使用XDSoft的datetimepicker来解决这个问题。
该解决scheme假定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.$);
我已经使用这个代码,它的作品很好…“.Datepicker”类是我的input,持有dateselect器
<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'); } ); }); });
使用最新版本的DatePicker,可以这样做:
//for tablets / phones $('#yourElement').datepicker().on('show', function (e) { $(this).trigger('blur'); })
但请注意,键盘可能会在屏幕底部闪烁一秒钟,直到blur()被制定为止。
- Xcode 7与iOS 9设备错误:设备不可用(无法find开发人员磁盘映像)
- 如何从xcode获取自己的应用程序版本?
- 为什么在iOS 5.1 SDK的iPad模拟器中没有“Home”button?
- Swift UIAlertController – > ActionSheet iPad的iOS8崩溃
- 正确的方式退出iPhone应用程序?
- 如何在iPad上以编程方式启动iBooks电子阅读器?
- 使用Swift中的UI_USER_INTERFACE_IDIOM()检测当前设备
- 如何在UIBarButtonItem中将UIGestureRecognizer添加到iPad应用程序中常见的撤销/重做UIPopoverControllerscheme中?
- 是否有可能与UITableView的tableHeaderView使用AutoLayout?