htmlinput自动聚焦,iOS设备input不能自动focus聚焦的解决方法

移动端(iPhone、iPad)的 Safari 或者微信默认是不支持 autofocus 属性的&＃xff0c;并且只有用户主动触发的事件才可以使 focus 一类的方法生效。

并且在 iOS 中使用 position: fixed 会导致 input 输入框的位置出现问题&＃xff0c;导致 input 无法点击或者说无法聚焦。

找了几个解决方案&＃xff0c;归纳整理一下&＃xff1a;

1、stackoverflow作者&＃xff0c;尝试过模拟点击&＃xff0c;触发点击&＃xff0c;直接执行click()……各种各样的事情。

这是目前正在用的解决方法&＃xff1a;$scope.gotoElement &＃61; function(eID) {

// call $anchorScroll()

$scope.smoothScrollTo(eID).then(function() {

clickElement(&＃39;#textarea&＃39;);

});

}

function clickElement(e) {

$(e).on(&＃39;touchstart&＃39;, function() {

//$(e).val(&＃39;touchstart&＃39;);

$(e).focus();

});

$(e).trigger(&＃39;touchstart&＃39;);

}

2、我们可以模拟一个 autofocus &＃xff1a;

HTML&＃xff1a;

JS&＃xff1a;document.addEventListener(&＃39;touchstart&＃39;, function (e) {

document.getElementById(&＃39;focus&＃39;).focus();

});

3、尝试用触发 click() 替代 focus( ) :$(this).next(&＃39;input&＃39;).click();

4、设置 CSS 属性&＃xff0c;可能是 -webkit-user-select:none 导致&＃xff0c;将其删除或着修改一下&＃xff1a;[type &＃61; text]&＃xff0c;textarea {

-webkit-user-select&＃xff1a;text

}