javascript - 使文本框不聚焦
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4075057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript - unfocus a textbox
提问by Joe
I have a mobile template with a login form which is ajax / url hash based browsing. If on an iphone a user clicks the "go" button on the iphone keyboard the ajax authenticates / logs them in and then loads the next page inside another div and hides the current login form div.
我有一个带有登录表单的移动模板，它是基于 ajax/url 哈希的浏览。如果在 iphone 上，用户单击 iphone 键盘上的“go”按钮，ajax 会对其进行身份验证/登录，然后在另一个 div 中加载下一页并隐藏当前登录表单 div。
The problem is, on an iphone the keyboard is still popped up. Is there anyway to unfocus a textbox element via javascript?
问题是，在 iphone 上，键盘仍然弹出。反正有没有通过javascript取消文本框元素的焦点？
回答by Xint0
Use the blur()method or try setting the focus on another element like a link.
使用该blur()方法或尝试将焦点设置在另一个元素（如链接）上。
回答by shygoo
This is what I used when .blur()didn't want to be my friend
这就是我.blur()不想成为我朋友时使用的
function blurAll(){
var tmp = document.createElement("input");
document.body.appendChild(tmp);
tmp.focus();
document.body.removeChild(tmp);
}
回答by tobek
If you don't have easy access to the specific element that you want to blur, there is a slightly hacky way you can implement "blur all" functionality.
如果您无法轻松访问要模糊的特定元素，则可以使用一种稍微笨拙的方法来实现“全部模糊”功能。
Just add the following HTML somewhere on your page:
只需在页面的某处添加以下 HTML：
<input id="blur-hack" type="text" style="position: absolute; opacity: 0;">
Then this JS will unfocus anything currently focused:
然后这个 JS 将取消关注当前关注的任何内容：
document.getElementById("blur-hack").focus();
Note that for the inline HTML styling, we can't do display: noneor else you can't focus on it. positionand opacitywill adequately remove the element from the flow - you could also use margins to shove it way off the page, etc.
请注意，对于内联 HTML 样式，我们不能这样做display: none，否则您无法专注于它。position并将opacity从流程中充分删除元素 - 您也可以使用边距将其推离页面等。
回答by Andrew Gray
Building on the solution from @shygoo - this translates well into TypeScript!
以@shygoo 的解决方案为基础 - 这可以很好地转化为 TypeScript！
export function unfocus(): any {
const tmp: HTMLInputElement => document.createElement('input');
document.body.appendChild(tmp);
tmp.focus();
document.body.removeChild(tmp);
}
Some notes...
一些笔记...
- It is of type
anyso that it's compatible with AngularJS's$timeoutservice, even though it never actually returns anything. tmpis constant since it never changes during the lifetime of the function call.
- 它的类型
any使其与 AngularJS 的$timeout服务兼容，即使它实际上从未返回任何内容。 tmp是常数，因为它在函数调用的生命周期内永远不会改变。
回答by Jamal Salman
You can make use of element.disabled parameter in javascript.
您可以在 javascript 中使用 element.disabled 参数。
Example:
例子：
<!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>`
`
回答by Shani Kehati
I had a problem with classNames
我遇到了classNames的问题
document.getElementsByClassName('formButtons').blur()
and the solutionwas Array.from()
和溶液是Array.from（）
const btns = Array.from( document.getElementsByClassName('formButtons') )
if (btns && btns.length) {
// go over let i in btns and
// btns[i].blur()
}
回答by Chad Scira
This will maintain scroll, and not cause any flash of a element
这将保持滚动，并且不会导致任何元素的闪烁
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;
}
based on @skygoo's solution
基于@skygoo 的解决方案
