Mobile Safari auto focus on text input

focusmobile-safarisafari

I would like to focus on a text input field immediately on page load. However the following code, that works on desktop browsers, doesn't work on mobile Safari (on iOS 6).:

  <input type="text" name="q" class="search" id="focusme" />

  ...

  <script type="text/javascript">
    window.onload=function(){var a=document.getElementById("focusme");a.focus();}
  </script>

I have tried to implement several suggested fixes for this. However I haven't been able to get it working. It does display the CSS changes to the field when it is in focus, however the keyboard is not brought up.

I suspect this may be due to my currently very limited understanding of JavaScript, but I think it may still be a bug in Safari.

The question:

In Safari on iOS 6, Do you know of any way to auto focus on a text input field on page load?

Thank you for your help 🙂

Update:

The page does have jquery and mobile-jquery available, if they need to be used.

Best Answer

Why using JavaScript? <input type="text" autofocus /> should do it!

Related Solutions

Iphone – How to disable phone number linking in Mobile Safari

This seems to be the right thing to do, according to the Safari HTML Reference:

<meta name="format-detection" content="telephone=no">

If you disable this but still want telephone links, you can still use the "tel" URI scheme.

Here is the relevant page at Apple's Developer Library.

Android – How to stop EditText from gaining focus at Activity startup in Android

Excellent answers from Luc and Mark. However, a good code sample is missing. Adding the tags android:focusableInTouchMode="true" and android:focusable="true" to the parent layout (e.g. LinearLayout or ConstraintLayout) like in the following example, will fix the problem.

<!-- Dummy item to prevent AutoCompleteTextView from receiving focus -->
<LinearLayout
    android:focusable="true" 
    android:focusableInTouchMode="true"
    android:layout_width="0px" 
    android:layout_height="0px"/>

<!-- :nextFocusUp and :nextFocusLeft have been set to the id of this component
to prevent the dummy from receiving focus again -->
<AutoCompleteTextView android:id="@+id/autotext"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:nextFocusUp="@id/autotext" 
    android:nextFocusLeft="@id/autotext"/>

Best Answer

Related Solutions

Iphone – How to disable phone number linking in Mobile Safari

Android – How to stop EditText from gaining focus at Activity startup in Android

Related Topic