javascript - 取消焦点文本框答案

【问题标题】：javascript - unfocus a textboxjavascript - 取消焦点文本框
【发布时间】：2010-11-02 05:10:07
【问题描述】：

我有一个带有登录表单的移动模板，它是基于 ajax / url hash 的浏览。如果在 iphone 上，用户单击 iphone 键盘上的“开始”按钮，ajax 会对其进行身份验证/登录，然后在另一个 div 中加载下一页并隐藏当前登录表单 div。

问题是，在 iPhone 上，键盘仍然弹出。有没有办法通过javascript取消焦点文本框元素？

【问题讨论】：

web-design.blogs.webucator.com/files/2010/08/onFocusTShirt.gif :-)

标签： javascript

【解决方案1】：

使用blur() 方法或尝试将焦点设置在另一个元素上，例如链接。

【讨论】：

没有别的办法了吗？我尝试将焦点设置在 div 上，但没有成功
还有blur()方法
document.activeElement.blur(); 非常适合我的情况。
在我的情况下我不得不使用event.target.parentNode.blur()，焦点更远；它甚至可以在层次结构中使用多个父级。以防万一有人遇到这种情况。

【解决方案2】：

这是我在.blur()不想成为我的朋友时使用的

function blurAll(){
 var tmp = document.createElement("input");
 document.body.appendChild(tmp);
 tmp.focus();
 document.body.removeChild(tmp);
}

【讨论】：

这太棒了，正是我想要的。我喜欢这个答案，因为它是自给自足的，只做这一件事，而且不会造成混乱。
非常棒的解决方案。
这是唯一有效的方法，但不幸的是它会将页面滚动到最底部。
尚未对此进行测试，但设置 tmp.style.position = "fixed" 可能会阻止任何滚动。

【解决方案3】：

你可以在javascript中使用element.disabled参数。

例子：

<!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>

`

【讨论】：

【解决方案4】：

如果您无法轻松访问要模糊的特定元素，您可以通过一种稍微笨拙的方式来实现“全部模糊”功能。

只需在页面的某处添加以下 HTML：

<input id="blur-hack" type="text" style="position: absolute; opacity: 0;">

然后这个 JS 将取消当前关注的任何内容：

document.getElementById("blur-hack").focus();

请注意，对于内联 HTML 样式，我们不能做 display: none 否则你不能专注于它。 position 和 opacity 将充分地从流中删除元素 - 您也可以使用边距将其推离页面，等等。

【讨论】：

或者你可以将height设置为0

【解决方案5】：

这将保持滚动，并且不会导致元素的任何闪烁

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;
}

基于@skygoo的解决方案

【讨论】：

【解决方案6】：

以@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 是常量，因为它在函数调用的生命周期内永远不会改变。

【讨论】：

【解决方案7】：

我遇到了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()
}

【讨论】：

【解决方案8】：

如果你只想模糊没有目标的东西，你可以在activeElement上调用blur()：

document.activeElement.blur();

【讨论】：