Changing Placeholder Text On Focus

Is there a simple solution for changing placeholder text when an input is in focus? For example:

<input type="text" placeholder="Join our mailing list!">

would become this:

<input type="text" placeholder="enter your email address...">

while the input is active.

Answers


$('input').focus(function() {
    $(this).attr('placeholder', 'enter your email address...')
}).blur(function() {
    $(this).attr('placeholder', 'Join our mailing list!')
})

http://jsfiddle.net/ByLGs/


You have this tagged "jQuery" so I assume you're open to using it. Here's a simple way:

<input type="text" placeholder="Join our mailing list!" title="enter your email address...">​
$('input').on('focus', function(){
    $(this).data('placeholder', $(this).attr('placeholder')); // Store for blur
    $(this).attr('placeholder', $(this).attr('title'));
}).on('blur', function(){
    $(this).attr('placeholder', $(this).data('placeholder'));
});​

Demo: http://jsfiddle.net/m6j8m/

This could be shortened up, but you get the idea. This way you don't have to keep track of attribute values in your javascript, it's all in the HTML so it's a one-size-fits-all solution. If using title doesn't suit your needs, you can use data- attributes instead or some other attribute.


Need Your Help

how to replace shimgvw.dll in windows 7

windows security dll command-line

On windows XP, I easily replace the corrupted shimgvw.dll with the original so that I could recover the problem of displaying the picture on thumbnail view and opening it with windows fax viewer.

How to program an android rom for DroidX

android rom

I was wondering if there were any places to look for help on how to make a custom ROM for my Droid X. I do not know where to start though. I know some JAVA and am learning more. I just do not know ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.