By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,948 Members | 1,559 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,948 IT Pros & Developers. It's quick & easy.

Form Field highlighting

P: n/a
Hi,
I am using the following script (in an AS.NET application) to highlight
text fields when they have the focus. Can I extend this to use other
form elements such as textareas and dropdowns? Thanks.

<script type="text/javascript">
window.onload = function(){
var inputElements = document.getElementsByTagName("input");
for(i=0;i<inputElements.length;i++){

if(inputElements[i].type == "text")
{
inputElements[i].onfocus = DoFocus;
inputElements[i].onblur = DoBlur;
}
}
}//end window.onload

function DoBlur(){
// alert("on blur fired");
this.className='normalField';
}

function DoFocus(){
// alert("on focus fired");
this.className = 'focusField';
}
</script>

Dec 4 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Xerxes wrote :
Hi,
I am using the following script (in an AS.NET application) to highlight
text fields when they have the focus. Can I extend this to use other
form elements such as textareas and dropdowns? Thanks.

<script type="text/javascript">
window.onload = function(){
var inputElements = document.getElementsByTagName("input");
for(i=0;i<inputElements.length;i++){

if(inputElements[i].type == "text")
{
inputElements[i].onfocus = DoFocus;
inputElements[i].onblur = DoBlur;
}
}
}//end window.onload

function DoBlur(){
// alert("on blur fired");
this.className='normalField';
}

function DoFocus(){
// alert("on focus fired");
this.className = 'focusField';
}
</script>
The easiest way to know if you can do it, is to try to do it :)

By the way, yes, you should be able to do it. just modify a little bit
your code to make it using textareas & selects :)

--
Naixn
http://fma-fr.net
Dec 4 '06 #2

P: n/a


On Dec 4, 7:12 pm, naixn <n...@won-fma.comwrote:
Xerxes wrote :
Hi,
I am using the following script (in an AS.NET application) to highlight
text fields when they have the focus. Can I extend this to use other
form elements such as textareas and dropdowns? Thanks.
<script type="text/javascript">
window.onload = function(){
var inputElements = document.getElementsByTagName("input");
for(i=0;i<inputElements.length;i++){
if(inputElements[i].type == "text")
{
inputElements[i].onfocus = DoFocus;
inputElements[i].onblur = DoBlur;
}
}
}//end window.onload
function DoBlur(){
// alert("on blur fired");
this.className='normalField';
}
function DoFocus(){
// alert("on focus fired");
this.className = 'focusField';
}
</script>The easiest way to know if you can do it, is to try to do it :)

By the way, yes, you should be able to do it. just modify a little bit
your code to make it using textareas & selects :)

--
Naixnhttp://fma-fr.net
I tried using "select" instead of "input" in the script but it didn't
work. Of course, I left out the "if inputElements[i].type == 'text' "
since the textbox is <input type="text"and select is <select>.
Am I missing something?
Thanks.

Dec 5 '06 #3

P: n/a
Xerxes wrote :
>
I tried using "select" instead of "input" in the script but it didn't
work. Of course, I left out the "if inputElements[i].type == 'text' "
since the textbox is <input type="text"and select is <select>.
Am I missing something?
Thanks.
Maybe you can try ( lazy to test it myself ) with the "option" tag, though the
"select" tag should work, if I remember correctly ( using background-color
changes with CSS ).

--
Naixn
http://fma-fr.net
Dec 5 '06 #4

P: n/a
ASM
Xerxes a écrit :
Hi,
I am using the following script (in an AS.NET application) to highlight
text fields
normal css features ... (except with IE (<7?) )

input, textarea { background: #ffc; color: maroon; }
input:focus, textarea:focus, input.ie, textarea.ie {
background: #ff0; color:black; }
when they have the focus. Can I extend this to use other
form elements such as textareas and dropdowns?
with some browsers you can even have a background image

option { background:url(myPict.jpg)no-repeat left center;}
option:focus, option.ie { background-position:right center;}

but with options I'm quite sure you can't choice background color on focus
<script type="text/javascript">
window.onload = function(){
var inputElements = document.getElementsByTagName("input");
for(i=0;i<inputElements.length;i++){

if(inputElements[i].type == "text")
{
inputElements[i].onfocus = DoFocus;
inputElements[i].onblur = DoBlur;
}
}
}//end window.onload
As only IE (IE<7 ?) needs JS :

<script type="text/javascript">
var IE = false; /*@cc_on IE=true; @*/
onload = function() {
if(!IE) return;
var F = document.forms['myForm'];
for(var i=0;i<F.length; i++)
if(F[i].type=='text' || F[i].tagName=='TEXTAREA')
{
F[i].onfocus = function()
{ this.className = this.className==''? 'ie' : ''; }
F[i].onblur = function()
{ this.className = this.className==''? 'ie' : ''; }
}
}
</script>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 5 '06 #5

P: n/a
ASM
Xerxes a écrit :
I tried using "select" instead of "input" in the script but it didn't
work.
Am I missing something?
yes you missed 'option' ... other inputs than 'text' is of no interest.

onload = function() {
var IE=false; /*@cc_on IE=true; @*/
if(!IE) return;
else if(document.getElementById) {
var F = document.forms[0];
for(var i=0;i<F.length;i++)
if(F[i].tagName=='SELECT')
for(var j=0;j<F[i].length;j++) {
F[i][j].onfocus = function() { roll(this); }
F[i][j].onblur = function() { roll(this); }
}
else if(F[i].type='text' || F[i].tagName=='TEXTAREA') {
F[i][j].onfocus = function() { roll(this); }
F[i][j].onblur = function() { roll(this); }
}
}
}
function roll(what) {
what.className = what.className==''? 'ie' : '';
}

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 5 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.