set focus in the input field on IOS device

This topic has 8 replies, 2 voices, and was last updated 4 years, 3 months ago by ea40.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
February 7, 2022 at 7:18 pm #36575

ea40
Participant

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

February 8, 2022 at 10:12 am #36581

Ernest Marcinko
Keymaster

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.

February 8, 2022 at 10:45 am #36583

ea40
Participant

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

February 9, 2022 at 10:54 am #36605
Ernest Marcinko
Keymaster
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.
February 9, 2022 at 2:35 pm #36613

ea40
Participant

Hi Ernest, thank you for the solution but it doesn´t work on my Iphone X.

February 9, 2022 at 2:53 pm #36614

Ernest Marcinko
Keymaster

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.

February 9, 2022 at 3:30 pm #36617

ea40
Participant

yes, that’s not so nice. thank you very much for your excellent support.

February 9, 2022 at 3:33 pm #36619

Ernest Marcinko
Keymaster

You cannot access this content.

February 9, 2022 at 3:34 pm #36620

ea40
Participant

Thank you, you can mark this topic as resolved.
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘set focus in the input field on IOS device’ is closed to new replies.