| OfficeRay 1.2 For Webforms & Web Applications |
This tips is about placing the cursor automatically in a form field when you load a webpage. For example in Google homepage, the blinking cursor is automatically placed in the search field, hence whenever we start typing, the words goes straight into the search box without the need to point and click inside the box first.
Although it looks trivial, actually it is not. In a web form where users repetitively fill in a form and press the submit button, the auto placement of the cursor in a pre selected textbox could save a lot of time by reducing the number of unnecessary mouse clicks.
Method 1. Using javascript - this can be done with "onload" and "focus".
Heres the code:-
<html>
<body onload="document.venus.yadda.focus();">
<form name='venus' method='POST' action=''>
<input type='text' name='yadda' value=''>
<input style='' type='submit' value='Submit' name='submit'>
</form>
</body>
</html>
In the above example, venus is the name of the form and yadda is the name of the text field. In your web forms, only this 2 variables need to be changed. For other words - document and focus(), just leave them as is.
a) Open Notepad, copy and paste the code above from <html> to </html>
b) Save as focus.htm on your desktop. Do not save as focus.txt
c) Doubleclick focus.htm and see the result in your browser.
Method 2. Using javascript - this can also be done with "setTimeout" and "focus".
<html>
<body>
<script>setTimeout("document.venus.yadda.focus()",10);</script>
<form name='venus' method='POST' action=''>
<input type='text' name='yadda' value=''>
<input style='' type='submit' value='Submit' name='submit'>
</form>
</body>
</html>
TextBanner
Method 3. Using OfficePhp
Although method 1 and 2 above works, but the resulting web page is ugly. This is only for educational purpose. If you are designing web forms or web apps for your company, you need to use an existing php framework. Download OfficePhp and edit the lines below to set the cursor focus.
a) Open module_form/htmlread.php
b) Edit line 96 by removing the double forward slash /
c) replace EditBox and yadda with the name of your form and textfield
Before
After
And here is the pretty web page using the OfficePhp
