I have an input field inside iframe, so when I click any input field, it gets focused. But again if I click outside (body area), the iphone keypad is not closed. Whenever I click done button explicity, it closed. Problem with only iphone and ipad inside iframes. This will work nicely in all browsers. So, I tried if there is no focus, called blur() or document.activeelement. but none of them are working.
Tried this, focus is triggered but focusout is not triggered.
document.addEventListener("focusout", function(){
document.activeElement.blur();
});
Any fix for this?
sample.html
<!doctype html>
<html>
<head>
</head>
<body>
<iframe src="index2.html" width="100%" height="200px"></iframe>
</body>
</html>
index2.html
<!doctype html>
<html>
<head>
<style>
input:focus{
border: 2px solid red;
}
</style>
</head>
<body>
<br></br>
<input type="text" id="myText"/>
</body>
</html>
I don't know why
blur()
not work inside iframe, but it does work without iframe.So I did a couple of tests, and finally I found them:
alert()
Simple alert something, it will close keypad.focus()
on a non text element, like the button.Here i show how do i do it used
focus()
:sample.html
index2.html