我有一个移动模板,其中包含一个基于ajax/url hash浏览的登录表单。如果在iphone上,用户点击iphone键盘上的“go”按钮,ajax将进行身份验证/登录,然后在另一个div中加载下一页并隐藏当前的登录表单div。
问题是,在iphone上,键盘仍然弹出。有没有办法通过javascript取消文本框元素的聚焦状态?
我有一个移动模板,其中包含一个基于ajax/url hash浏览的登录表单。如果在iphone上,用户点击iphone键盘上的“go”按钮,ajax将进行身份验证/登录,然后在另一个div中加载下一页并隐藏当前的登录表单div。
问题是,在iphone上,键盘仍然弹出。有没有办法通过javascript取消文本框元素的聚焦状态?
使用blur()
方法,或尝试将焦点设置到其他元素(如链接)。
blur()
方法是指模糊处理。 - Xint0document.activeElement.blur();
对我的情况起到了完美的作用。 - A1rPunevent.target.parentNode.blur()
,因为焦点更高;它甚至可以在层次结构中向上多个父级工作。以防万一有人遇到这种情况而来到这里。 - Kesarion当.blur()
不愿意成为我的朋友时,这就是我使用的方法
function blurAll(){
var tmp = document.createElement("input");
document.body.appendChild(tmp);
tmp.focus();
document.body.removeChild(tmp);
}
tmp.style.position = "fixed"
设置为可能会防止任何滚动。 - tobek<!DOCTYPE html>
<html>
<body>
Name: <input type="text" id="myText">
<p>Click the button to unfocus the text field.</p>
<button onclick="myFunction()">Unfocus input</button>
<script>
document.getElementById("myText").focus();
function myFunction() {
document.getElementById("myText").disabled = true;
document.getElementById("myText").disabled = false;
}
</script>
</body>
</html>
`
<input id="blur-hack" type="text" style="position: absolute; opacity: 0;">
document.getElementById("blur-hack").focus();
display: none
,否则您将无法聚焦到它。 position
和opacity
可以足够地将元素从流中移除 - 您还可以使用边距将其推到页面之外等方法。height
设为 0。 - Bill基于@shygoo的解决方案 - 这个方案很好地转化为TypeScript!
export function unfocus(): any {
const tmp: HTMLInputElement => document.createElement('input');
document.body.appendChild(tmp);
tmp.focus();
document.body.removeChild(tmp);
}
一些注释...
any
,这样它就与AngularJS的$timeout
服务兼容,即使它实际上从未返回任何内容。tmp
是常量,因为它在函数调用的生命周期内永远不会改变。resetFocus () {
let scrollTop = document.body.scrollTop;
let body = document.body;
let tmp = document.createElement('input');
tmp.style.opacity = 0;
body.appendChild(tmp);
tmp.focus();
body.removeChild(tmp);
body.scrollTop = scrollTop;
}
我遇到了一个关于 classNames 的问题。
document.getElementsByClassName('formButtons').blur()
解决方案是使用Array.from()。
const btns = Array.from( document.getElementsByClassName('formButtons') )
if (btns && btns.length) {
// go over let i in btns and
// btns[i].blur()
}