javascript-取消对文本框的聚焦

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

---

问题是，在iphone上，键盘仍然弹出。是否可以通过javascript取消文本框元素的焦点？

使用

blur（）

方法，或者尝试将焦点设置在另一个元素上，如链接。

如果您无法轻松访问要模糊的特定元素，则可以使用一种稍微有点粗糙的方法实现“全部模糊”功能

只需在页面的某个位置添加以下HTML：

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

---

请注意，对于内联HTML样式，我们不能执行

display:none

，否则您不能专注于它<代码>位置和

不透明度

将充分从流中删除元素-您还可以使用边距将其从页面中挤出，等等。

这是我在

.blur（）

不想成为我的朋友时使用的

function blurAll(){
 var tmp = document.createElement("input");
 document.body.appendChild(tmp);
 tmp.focus();
 document.body.removeChild(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;
}

---

基于@skygoo的解决方案

建立在@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

是常量，因为它在函数调用的生命周期内从不改变

---

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

例如：

姓名：
单击按钮以解除文本字段的焦点

非焦点输入
document.getElementById（“myText”）.focus（）；
函数myFunction（）{
document.getElementById（“myText”）.disabled=true；
document.getElementById（“myText”）.disabled=false；
}

我对类名有问题

document.getElementsByClassName('formButtons').blur()

而解决方案是Array.from（）

---

如果只想在没有目标的情况下模糊某个对象，可以在以下位置调用

blur（）

：

---

没有别的办法吗？我曾尝试将焦点设置在一个div上，但效果不好，有

blur（）

方法

document.activeElement.blur（）

对我的案例非常有效。我必须使用

event.target.parentNode.blur（）

在我的案例中，焦点更高；它甚至可以使多个父级在层次结构上工作。以防万一有人在这种情况下来到这里。：-）或者你可以将高度设置为0。这太棒了，正是我想要的。我喜欢这个答案，因为它是独立的，只做这一件事，不留下任何混乱。非常好的解决方案。这是唯一有效的解决方案，但不幸的是它将页面滚动到最底部。我还没有对此进行测试，但设置

tmp.style.position=“fixed”

可能会阻止任何滚动。

document.getElementsByClassName('formButtons').blur()

const btns = Array.from( document.getElementsByClassName('formButtons') ) 
if (btns && btns.length) {
 // go over let i in btns and 
 // btns[i].blur()
}

document.activeElement.blur();