我的日期选择器可以在Windows Chrome浏览器,Windows Safari,Mac Safari,Android浏览器的触发事件模糊中消失,除了IOS Safari浏览器。
我的代码:
<input class="title-menu-left-input form-control"
name="birthday" data-date-format="yyyy-MM-dd"
data-date-type="string" data-autoclose="1"
ng-model="dateFrom" placeholder="date" data-trigger="focus"
bs-datepicker>
任何人都可以帮助我找到为什么它在IOS safari浏览器中的触发事件模糊中不会消失?提前谢谢!
有一些背景可能会帮助您更多地了解我的问题。您可以访问此页面http://mgcrea.github.io/angular-strap/#/datepickers或plunker:http://plnkr.co/edit/lUtYyIqD4ETCG5zbKrNC?p=preview。我的代码和它一样。我不知道为什么它会在Windows Chrome浏览器,Windows Safari,Mac Safari,Android浏览器的触发事件模糊中消失,除了IOS Safari浏览器。我想知道我是否在IOS Safari中做了特殊处理。有人问过这个问题吗?
答案 0 :(得分:0)
另一个源代码呢?它应该有一个按钮来打开日期选择器弹出窗口,有些来自控制器
答案 1 :(得分:0)
问题是iPad上没有触发“模糊”事件。因此,当用户触摸日历输入和下拉列表之外的屏幕时,我会手动触发该事件。
controller: ['$scope', function ($scope) {
function isiPadiPhone () {
return ((navigator.userAgent.match(/iPad/i) != null) ||
(navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPod") != -1));
}
if (isiPadiPhone()) {
document.body.addEventListener("touchend", handleTouchEnd, false);
$scope.$on('$destroy', function () {
document.body.removeEventListener("touchend", handleTouchEnd, false);
});
}
function handleTouchEnd(event) {
var dateInput = document.getElementById('your_input_id');
var nextSibling = dateInput.nextSibling;
if (!nextSibling || !nextSibling.classList || !nextSibling.classList.contains('dropdown-menu')) {
//no calendar dropdown is shown now
return;
}
if (isParent(event.target, nextSibling)) {
return;
}
if (isParent(event.target, dateInput)) {
return;
}
//we have to fire 'blur' event manually on iPad
dateInput.blur();
}
function isParent(element, parent) {
while (element != null) {
if (element === parent) {
return true;
}
element = element.parentNode;
}
return false;
}
}