homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

How to select text when focus on input item

Msg#: 4362039 posted 5:27 pm on Sep 13, 2011 (gmt 0)

New to this forum so I'm sorry if this is the wrong forum or if this is too simple of a question.

I would like that if I navigate to an input item type=text that the text in that item will be automatically selected (highlighted). Is there a way to do this on the input item without creating a class and assigning that class to each item?

Thank you for any help.



WebmasterWorld Senior Member 10+ Year Member

Msg#: 4362039 posted 7:53 pm on Sep 13, 2011 (gmt 0)

Does the field already have text in it that you want highlighted or are you talking about the text the user inputs? Or are you referring to highlighting the text when a user wants to copy and paste it?



Msg#: 4362039 posted 8:21 pm on Sep 13, 2011 (gmt 0)

I would like it to work like onFocus="this.select" but I would like to do it form-wide instead of putting onFocus on each item.


5+ Year Member

Msg#: 4362039 posted 11:31 pm on Sep 15, 2011 (gmt 0)

If you look up the form element in the HTML specification, it doesn't have a onfocus event.

See: [w3.org...]


WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4362039 posted 4:29 pm on Sep 16, 2011 (gmt 0)

welcome aboard mlarch, the straight answer - when you need to select certain portions of text, this is one of the "effects" that normally requires different handling for different browsers. For the whole value of the field, the select method might work for you.

<input type="text" onfocus="this.select();" value="test me">

Just a FYI, that is Javascript in use there, if JS is disabled no deal.

edit: oops, missed this:

I would like it to work like onFocus="this.select" but I would like to do it form-wide instead of putting onFocus on each item.

OK, well the best approach then is to attach the behaviors externally Given

<form method="post" id="myform" action="">

You could do something like this (tested:)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
window.onload=function() { attachBehaviors(); };
function attachBehaviors() {
if (document.getElementById('myform')) {
var form = document.getElementById('myform');
for (j=0;j<form.elements.length;j++) {
var type=form.elements[j].type;
if ((type=='text') || (type=='textarea')) {
form.elements[j].onfocus=function() { this.select(); };
<form method="post" id="myform" action="">
<p><label for="field1">Field 1:</label> <input type="text" id="field1" name="field1" value="text one"></p>
<p><label for="field2">Field 2:</label> <input type="text" id="field2" name="field2" value="text two"></p>
<p><label for="field3">Field 3:</label> <input type="text" id="field3" name="field3" value="text three"></p>
<p><label for="field5">Field 4:</label> <input type="text" id="field4" name="field4" value="text four"></p>
<p><label for="field5">Field 5:</label> <input type="text" id="field5" name="field5" value="text five"></p>
<p><label for="field6">Field 5:</label> <textarea id="field5" name="field5">This is
text area block six
with newlines and whatnot</textarea></p>

A note on what's happening: Browsers render top-down, so code in the head directed at page elements won't find them because they haven't rendered yet:

javascript executes on . . . what?
form elements render AFTER js

Normally you'd just put the code at the bottom of the page, but window.onload allows you to make it portable, put the code anywhere you want. window.onload delays execution of the code until the page has fully loaded.

On load it executes the function attachBehaviors, which loops through the form elements of the form id "myform" and if they are text or textarea type elements (obviously won't work on select lists) it assigns the behavior to the current element in the loop using the this keyword.

This keeps your page output lean and mean, not clogged up with code, if you want to take it a step further you put the JS in an external file and put this in the head:

<script type="text/javascript" src="my-javascript.js"></script>


Msg#: 4362039 posted 7:04 pm on Sep 27, 2011 (gmt 0)

Thank you all for you replies. Rocknbil, that works perfectly. Thanks again.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved