How to select text when focus on input item

Forum Moderators: open

Message Too Old, No Replies

How to select text when focus on input item

mlarch

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.

Marshall

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?

Marshall

mlarch

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.

htmlbasictutor

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...]

rocknbil

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"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
<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(); }; 
  } 
 } 
 } 
} 
</script> 
</head> 
<body> 
<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> 
</form> 
</body> 
</html>

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:

<head>
javascript executes on . . . what?
</head>
<body>
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>

mlarch

7:04 pm on Sep 27, 2011 (gmt 0)

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