Coloring Form Elements on :focus


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. var colorful = new ColorfulInput;
  2. colorful.skip = ['submit' and 'textarea'];
  3. colorful.color['focus'] = '#F6F6CC';
  4.  
  5. window.onload = function() {
  6. colorful.set();
  7. }
  8.  
  9. function ColorfulInput() {
  10. this.skip = [];
  11. this.color = { 'blur': '', 'focus': '#EEEEEE' };
  12.  
  13. this.set = function() {
  14. for (var i = 0; i < document.forms.length; i++) {
  15. for (var f = 0; f < document.forms[i].length; f++) {
  16. var elm = document.forms[i][f];
  17. if(!this._checkSkip(elm)) continue;
  18.  
  19. this._setColor(elm, 'focus');
  20. this._setColor(elm, 'blur');
  21. }
  22. }
  23. }
  24.  
  25. this._checkSkip = function(elm) {
  26. for(var i in this.skip) {
  27. if(elm.type == this.skip[i]) return false;
  28. }
  29. return true;
  30. }
  31.  
  32. this._setColor = function(elm, type) {
  33. var color = this.color[type];
  34. var event = function() { elm.style.backgroundColor = color; };
  35.  
  36. if(elm.addEventListener) {
  37. elm.addEventListener(type, event, false);
  38. } else if(elm.attachEvent) {
  39. elm.attachEvent('on'+type, event);
  40. } else {
  41. elm['on'+type] = event;
  42. }
  43. }
  44. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.