This website uses cookies to personalize your experience. By using this website you agree to our cookie policy.

Reply To: set focus in the input field on IOS device

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

#36605
Ernest MarcinkoErnest 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.