我们正在使用这个jQuery UI日期选择器包装器 ,它适用于站点的桌面版本。
但是,当谈到移动设备时,我们确实遇到了很大的问题。 然后,当我点击输入字段时,会显示日期选择器,此外还会显示移动键盘,它会占用一半的屏幕。
目前我们的指令看起来像这样(CoffeeScript):
"use strict" angular.module("theapp").directive "datePicker", -> restrict: 'EA' scope: model: '=' name: '@' required: '@' options: '=' template: '<input type="text" ui-date="dateOptions" ng-model="model" ng-required="{{ required }}">' replace: true link: (scope, element, attrs) -> scope.required ?= false scope.dateOptions = dateFormat: "dd.mm.yy" yearRange: "1900:-0" changeYear: true changeMonth: true regional: "de" _.extend(scope.dateOptions, scope.options)到目前为止我尝试了什么:
一旦获得焦点,就立即模糊输入字段。 结果:移动键盘闪烁两次。 将类型从文本更改为按钮。 结果:它在桌面上工作得很好,但在移动设备上却不行。 也许我在这里做错了什么。任何人都知道如何解决这个问题的好方法?
谢谢!
We are using this jQuery UI date picker wrapper which is working fine for the Desktop version of the site.
But we do have a huge problem when it comes to a mobile device. Then when I click on the input field, the datepicker shows up and additionally the mobile keyboard appears as well which uses half of the screen.
Currently our directive looks like this (CoffeeScript):
"use strict" angular.module("theapp").directive "datePicker", -> restrict: 'EA' scope: model: '=' name: '@' required: '@' options: '=' template: '<input type="text" ui-date="dateOptions" ng-model="model" ng-required="{{ required }}">' replace: true link: (scope, element, attrs) -> scope.required ?= false scope.dateOptions = dateFormat: "dd.mm.yy" yearRange: "1900:-0" changeYear: true changeMonth: true regional: "de" _.extend(scope.dateOptions, scope.options)What I tried so far:
Bluring the input field as soon as it gets focus. Result: The mobile keyboard flickers twice. Changing the type from text to button. Result: It works just fine on a Desktop, but not on a mobile device. Maybe I'm doing something wrong here.Anyone knows a good solution how to fix that?
Thank you!
最满意答案
将readonly="readonly"添加到输入中,键盘将不再弹出mobiel设备(仅在iPhone上测试):
<input type="text" id="date_picker" readonly="readonly" />Add readonly="readonly" to the input and the keyboard won't pop up anymore on mobiel devices (tested on iPhone only):
<input type="text" id="date_picker" readonly="readonly" />更多推荐
scope,mobile,移动,dateOptions,电脑培训,计算机培训,IT培训"/> <meta name="d
发布评论