- This topic has 8 replies, 2 voices, and was last updated 4 years, 3 months ago by
.
-
Posts
-
Hi,
I implemented the Searchbox in the header of my website. On click the magnifier icon the input field is visible.
I want to set the focus in the input field after it is visible.
On desktop ist works good but on my IOS (iphone X) device the focus doesn´t set in the input field.
I use the code from this ticket: https://wp-dreams.com/forums/topic/set-the-focus-in-the-input-field/Have you a configuration which can help me or have you another solution ?
BR Ertan
Hi,
Custom code may not be required for this to work with the most recent release:
– Make sure this option is active: https://i.imgur.com/VPhXqrU.png
– Also, switch the javascript source to minified (instead of the legacy): https://i.imgur.com/L2D72yG.png
– Then clear all of your site cache, minify, page cache etc..
Once all the cache is cleared, including the mobile device cache, it should start working on all devices.Hi Ernest,
I have installed Ajax Search Pro Version 4.21.10 and WordPress 5.9
I also activated your mentioned configuration, deleted the custom code and cleared all caches.But on mobile (on my iphone X) the focus doesn´t set into input field and the keyboard doesn´t appears.
BR Ertan
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.
That’s a bummer, and I’m afraid there is no other option left to do this programmatically.
I assume apple did patch the newer devices. I have tried an iPhone 11 and a 13, and both worked all right, the keyboard shows up even without this code. I honestly don’t know what devices or how are they affected by this Safari bug, there is very little information about it.
- The topic ‘set focus in the input field on IOS device’ is closed to new replies.