Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › set focus in the input field on IOS device › Reply To: set focus in the input field on IOS device
Hi,
It seems to work all right on our ends, on an iphone 11, latest safari version: https://youtu.be/b1wHdYq4n7k
However I can imagine it not working on some other versions, or some other IOS versions or maybe device revisions. Apple’s Safari is notoriously inconsistent and very problematic in every aspect for web development.
I found this issue is a known problem on some devices, but I could not find which ones are affected, and why is it happening. For some people it works as it is intended, for others it does not.
Based on their suggestions from that stack overflow topic, try this code:
add_action("wp_footer", "asp_custom_script_wp_footer");
function asp_custom_script_wp_footer() {
?>
<script>
function focusAndOpenKeyboard(el, timeout) {
if(!timeout) {
timeout = 100;
}
if(el) {
// Align temp input element approximately where the input element is
// so the cursor doesn't jump around
var __tempEl__ = document.createElement('input');
__tempEl__.style.position = 'absolute';
__tempEl__.style.top = (el.offsetTop + 7) + 'px';
__tempEl__.style.left = el.offsetLeft + 'px';
__tempEl__.style.height = 0;
__tempEl__.style.opacity = 0;
// Put this temp element as a child of the page <body> and focus on it
document.body.appendChild(__tempEl__);
__tempEl__.focus();
// The keyboard is open. Now do a delayed focus on the target element
setTimeout(function() {
el.focus();
el.click();
// Remove the temp element
document.body.removeChild(__tempEl__);
}, timeout);
}
}
jQuery(function($){
$('.promagnifier').on('click', function(){
var _this = this;
setTimeout(function() {
if ( $(_this).closest('.asp_w').attr('asp-compact') == 'open' ) {
focusAndOpenKeyboard($(_this).closest('.asp_w').find('input.orig').get(0), 100);
}
}, 500);
});
});
</script>
<?php
}
However I honestly don’t know if this will work at all – as it is only a suggested “hack” by other users, and the core issue needs to be fixed in the Safari browser.