Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to place the cursor (auto focus) in text box when a page gets loaded without javascript support?

Tags:

html

css

I have a form with some text fields,and I want to place the cursor (auto focus) on first text field of form when page gets loaded.

I want to do it without using javascript.

like image 898
Thavamani Kasi Avatar asked Aug 05 '13 09:08

Thavamani Kasi


People also ask

How do I keep my cursor in a TextBox?

To position the cursor at the end of the contents of a TextBox control, call the Select method and specify the selection start position equal to the length of the text content, and a selection length of 0.

How do you focus a cursor in HTML?

To move the cursor to the beginning of an input field: Use the setSelectionRange() method to move the cursor to the beginning of the input field. Call the focus() method on the input element. The focus method will move the cursor to the beginning of the element's value.

How do you put a focus on a TextBox in HTML?

To set focus to an HTML form element, the focus() method of JavaScript can be used. To do so, call this method on an object of the element that is to be focused, as shown in the example. Example 1: The focus() method is set to the input tag when user clicks on Focus button.


4 Answers

Ya its possible to do without support of javascript..
We can use html5 auto focus attribute
For Example:

<input type="text" name="name" autofocus="autofocus" id="xax" />

If use it (autofocus="autofocus") in text field means that text field get focused when page gets loaded.. For more details:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html

like image 150
Thavamani Avatar answered Oct 26 '22 09:10

Thavamani


Just add autofocus in first input or textarea.

<input type="text" name="name" id="xax" autofocus="autofocus" />
like image 22
Rajnikant Kakadiya Avatar answered Oct 26 '22 09:10

Rajnikant Kakadiya


This will work:

OnLoad="document.myform.mytextfield.focus();"
like image 4
Vishal Avatar answered Oct 26 '22 07:10

Vishal


<body onLoad="self.focus();document.formname.name.focus()" >

formname is <form action="xxx.php" method="POST" name="formname" >
and name is <input type="text" tabindex="1" name="name" />

it works for me, checked using IE and mozilla.
autofocus, somehow didn't work for me.
like image 2
dewaz Avatar answered Oct 26 '22 09:10

dewaz