I'm using select
tag with options to show search results in the mobile Safari.
The problem is next:
- user sets focus to the input
onblur="ShowSelectTag()" type="text"
after that keyboard appeared - user writes some text to search by and pushes the button
- "blur" event takes place and the select element with results is showed in a proper place
- the keyboard is hidden (because of blur event) but the position of the select element remains the same.
The HTML is as follows:
<input type="text" onblur="ShowSelectTag()" />
<input type="button" value="click me" onclick="return false;" />
<select id="SelectToShow" style="width:0px;">
<option>otpion</option>
<option>otpion</option>
<option>otpion</option>
<option>otpion</option>
<option>otpion</option>
</select>
The JS method to show select
tag:
<script type="text/javascript">
function ShowSelectTag()
{
var Select = document.getElementById("SelectToShow");
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
Select.dispatchEvent(event);
}
</script>
Link to the image is next: https://onedrive.live.com/redir?resid=B2873888E0BA0E45!1335&authkey=!ADjrvx4jm1rCDWg&v=3&ithint=photo%2cpng
Link to the html file: https://onedrive.live.com/redir?resid=B2873888E0BA0E45%211334
If someone have experience with that, it would be highly appreciated.