Comments on: Changing Form Input Styles on Focus with jQuery

By: 55 jQuery Form Plugins To Download And Use | Ning Ma blog

55 jQuery Form Plugins To Download And Use | Ning Ma blog — Wed, 08 Feb 2012 17:22:23 +0000

[...] Changing Form Input Styles on Focus with jQuery [...]

By: krish

krish — Tue, 07 Feb 2012 07:27:41 +0000

HI,

Like the text-area i would like to add this for password how achieve it?

By: Shaun

Shaun — Mon, 06 Feb 2012 18:45:47 +0000

Hi There,

Thank you for the code. I’m have one little problem making it work with ‘textarea’ I can get it to work but the textarea won’t recognize rows? Can you help please

Build Internet! | Changing Form Input Styles on Focus with JQuery

$(document).ready(function() {
$(‘input[type="text"],textarea’).addClass(“idleField”);
$(‘input[type="text"],textarea’).focus(function() {
$(this).removeClass(“idleField”).addClass(“focusField”);
if (this.value == this.defaultValue){
this.value = ”;
}
if(this.value != this.defaultValue){
this.select();
}
});
$(‘input[type="text"],textarea’).blur(function() {
$(this).removeClass(“focusField”).addClass(“idleField”);
if ($.trim(this.value) == ”){
this.value = (this.defaultValue ? this.defaultValue : ”);
}
});
});

*{
margin:0;
padding:0;
font:bold 12px “Lucida Grande”, Arial, sans-serif;
}
body {
padding: 10px;
}
h1{
font-size:14px;
}
#status{
width:50%;
padding:10px;
height:42px;
outline:none;
}
.focusField{
border:solid 2px #73A6FF;
background:#EFF5FF;
color:#000;
}
.idleField{
background:#EEE;
color: #6F6F6F;
border: solid 2px #DFDFDF;
}

Changing Form Input Styles on Focus with JQuery

By: 40 Jquery Form Tutorials & Plugins | My Blog

40 Jquery Form Tutorials & Plugins | My Blog — Thu, 26 Jan 2012 00:57:49 +0000

[...] Changing Form Input Styles on Focus with jQuery [...]

By: 40 Jquery Form Tutorials & Plugins | WEBGRAPHIC

40 Jquery Form Tutorials & Plugins | WEBGRAPHIC — Wed, 25 Jan 2012 14:58:09 +0000

[...] Changing Form Input Styles on Focus with jQuery [...]

By: earthdesigner

earthdesigner — Sat, 07 Jan 2012 13:41:46 +0000

I was thinking that simplified version would be to create just a css class “focus” then all the javascript will resume to:

$(‘input[type=text], textarea’).focus(function(){ $(this).addClass(‘focus’) }).blur(function(){ $(this).removeClass(‘focus’)});

Good article anyway ;)

By: Bohry

Bohry — Fri, 06 Jan 2012 18:52:35 +0000

Very nice! I make a little change to able this effect to textarea´s too. Danke!!!!

By: tes

tes — Thu, 01 Dec 2011 02:41:04 +0000

can you please update this, its not working with jq 1.7.1, when you focus out the field, it reset to default value used at start.

By: Awesome css form and validations using jquery | ExceptionHandle.com

Awesome css form and validations using jquery | ExceptionHandle.com — Sun, 27 Nov 2011 17:08:05 +0000

[...] Changing Form Input Styles on Focus with jQuery [...]

By: cyberv

cyberv — Mon, 07 Nov 2011 19:02:40 +0000

add something like this in your style
#password{
width:400px;
padding:5px;
outline:none;
height:20px;
font-weight:bold;
}

and add this in the script

// password boxes
$(document).ready(function() {
$(‘input[type="password"]‘).addClass(“idleField”);
$(‘input[type="password"]‘).focus(function() {
$(this).removeClass(“idleField”).addClass(“focusField”);
if (this.value == this.defaultValue){
this.value = ”;
}
if(this.value != this.defaultValue){
this.select();
}
});
$(‘input[type="text"]‘).blur(function() {
$(this).removeClass(“focusField”).addClass(“idleField”);
if ($.trim(this.value == ”)){
this.value = (this.defaultValue ? this.defaultValue : ”);
}
});
});