Detect input, textarea & select boxes

Forum Moderators: open

Message Too Old, No Replies

Detect input, textarea & select boxes

adding focus and blur CSS effects to them

Fiasst

5:07 pm on Jun 24, 2007 (gmt 0)

Hello,

I'm finding it hard to detect Input, Textarea and Select field elements onLoad. I want to change the background color of Z element when focus is set. I'm using a CMS so I can't hard code any JavaScript.

Any help is very much appreciated!

Marc

Bernard Marx

5:36 pm on Jun 24, 2007 (gmt 0)

I can't hard code any JavaScript

I'm confused about this. Does it mean that JS can't be used.
If so, ....?

DrDoc

8:55 pm on Jun 24, 2007 (gmt 0)

input:focus {
background: #ff0;
}

Fiasst

12:28 pm on Jun 25, 2007 (gmt 0)

Hi,

I'm using input:focus but that isn't recognized by IE so, I'm looking for a cross-browser solution.

What I meant by not being able to hardcode is, normally I'd write:


<input name="email" type="text" onfocus="this.style.border='1px solid #FF6600'" onblur="this.style.border='1px solid #C1C1C1'" />

- To each form element. But the forms are generated with php and it isn't feasible to hardcode the php with the above code.

Javascript seems to be the best solution as it can detect form elements and add event listeners to them.

My problem is i'm useless at syntax and no matter how much I read about this solution I can't make it work.

So I'm still asking for some help!

Thanks :)

vincevincevince

12:35 pm on Jun 25, 2007 (gmt 0)

You've two options - include one of the javascript systems which add :focus to IE6 (e.g. ie7.js) - or - code your own JS in the header to run onLoad and incorporate code from any of the many getElementsByType functions which are out there

Fotiman

5:47 pm on Jun 25, 2007 (gmt 0)

Here's how you could do it using the Yahoo UI Library (for it's DOM and Event Utilities):

Note, stying form elements will give you inconsitent results. For example, I don't think you can style the border of select elements in IE6.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
<style type="text/css"> 
input, 
select, 
textarea { border: 1px solid #c1c1c1; } 
.hasFocus { border: 1px solid #f60; background-color: #ffc; } 
</style> 
<title></title> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript"> 
YAHOO.util.Event.on(window, 'load', function(){ 
  // Attach focus event handlers 
  var inputs = document.getElementsByTagName('input'); 
  var selects = document.getElementsByTagName('selects'); 
  var textareas = document.getElementsByTagName('textarea'); 
  YAHOO.util.Event.on([inputs, selects, textareas], 'focus', function(e){ 
    YAHOO.util.Dom.addClass(this, 'hasFocus'); 
  }); 
  // Attach blur handlers 
  YAHOO.util.Event.on([inputs, selects, textareas], 'blur', function(e){ 
    YAHOO.util.Dom.replaceClass(this, 'hasFocus', ''); 
  }); 
}); 
</script> 
</head> 
<body> 
<form action=""> 
<div id="container"> 
<input > 
<select><option></option></select> 
<textarea></textarea> 
</div> 
</form> 
</body> 
</html>