javascript - unfocus a textbox
JavascriptJavascript Problem Overview
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.
The problem is, on an iphone the keyboard is still popped up. Is there anyway to unfocus a textbox element via javascript?
Javascript Solutions
Solution 1 - Javascript
Use the blur() method or try setting the focus on another element like a link.
Solution 2 - Javascript
This is what I used when .blur() didn't want to be my friend
function blurAll(){
var tmp = document.createElement("input");
document.body.appendChild(tmp);
tmp.focus();
document.body.removeChild(tmp);
}
Solution 3 - Javascript
You can make use of element.disabled parameter in javascript.
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>
`
Solution 4 - Javascript
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:
<input id="blur-hack" type="text" style="position: absolute; opacity: 0;">
Then this JS will unfocus anything currently focused:
document.getElementById("blur-hack").focus();
Note that for the inline HTML styling, we can't do display: none or else you can't focus on it. position and opacity will adequately remove the element from the flow - you could also use margins to shove it way off the page, etc.
Solution 5 - Javascript
If you only want to blur something without a target, you can call blur() on activeElement:
document.activeElement.blur();
Solution 6 - Javascript
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
Solution 7 - Javascript
Building on the solution from @shygoo - this translates well into 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.
Solution 8 - Javascript
I had a problem with classNames
document.getElementsByClassName('formButtons').blur()
and the solution was Array.from()
const btns = Array.from( document.getElementsByClassName('formButtons') )
if (btns && btns.length) {
// go over let i in btns and
// btns[i].blur()
}