All geek questions in one place

How to change input focus on tablet using js?

I use the JavaScript below to change the focus to the next input on the form when the maximum input length is reached. It works well on the desktop, but it does not work on the tablet. When the current input loses focus, the virtual keyboard closes and the next input field does not receive focus.

Does anyone know how to change the focus of input on a tablet without using the built-in “next” button?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0" /> <title>inpuTest</title> <script language="JavaScript"> function myCtrl(elmnt) { if (elmnt.value.length==elmnt.maxLength) { next=elmnt.tabIndex if (next<document.frmContact.elements.length) { document.frmContact.elements[next].focus() } } } </script> <style type="text/css"> form{ margin:0 auto; background-color:#CCC; padding:2%; border:1px solid #999; } form input,textarea{ width:96%; } </style> </head> <body> <form name="frmContact" method="post"> <strong>1. Your name:</strong> <span class="times_17">(max-lenght 4)</span><br /><br /> <input name="formName" tabindex="1" value="" placeholder="Name" maxlength="4" type="text" onFocus="this.select()" onkeyup="myCtrl(this)"><br /><br /> <strong>2. Your email:</strong> <span class="times_17">(required)</span><br /><br /> <input id="formEmail" name="formEmail" tabindex="2" value="" placeholder=" example@mail.it " maxlength="4" type="text" onFocus="this.select()" onkeyup="myCtrl(this)"><br /><br /> <strong>3. Your number:</strong><br /><br /> <input name="formWebsite" tabindex="3" placeholder="Only numbers 1234" maxlength="4" type="number" onFocus="this.select()" onkeyup="myCtrl(this)"><br /><br /> <strong>4. Your comments:</strong> <span class="times_17">(required)</span><br /><br /> <textarea name="formComment" tabindex="4" id="comment" cols="45" rows="5" class="input2"></textarea> </form> </body> </html>
+4
source share
1 answer

This cannot be done on the ipad. I don't know if android does, but I think you will also want to have this on an ipad. It is because of Apple's design that some focus events in Mobile Safari are ignored.

You can look at these stack overflow issues:

or look at quora where Allen Pike says:

By design, some focus () events in Mobile Safari are ignored. Many sites will do focus () unnecessarily, and the keyboard will slow / intrusive. This is especially annoying when using frameworks like SproutCore, which do their work in a timeout-based startup loop. Khan Answer Wei is a good look at how to get around this.

I'm sorry that I did not find an equal link for Android. It may be because it works there, or nobody seems to be interested in such a thing on android :)

+2
source

Source: https://habr.com/ru/post/1403861/

More articles:


All Articles