Marshall
msg:4362084 | 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
msg:4362092 | 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
msg:4363097 | 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
msg:4363452 | 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
msg:4367967 | 7:04 pm on Sep 27, 2011 (gmt 0) |
Thank you all for you replies. Rocknbil, that works perfectly. Thanks again.
|
|
