Default text in input field

Question

I don’t know if this has a special name for it, but is there an easy way to set the default text in the input field, which disappears in focus and appears again when blurred, if the text field is empty?

Answer 1

the word WATERMARK

• http://plugins.jquery.com/project/Watermark
• http://digitalbush.com/projects/watermark-input-plugin/
• http://cysemic.com/2008/12/very-simple-textbox-watermark-using-jquery/

I recommend using the plugin if you do not have time to develop and test. There are many problems and side effects to consider when writing this code.

• Confirm the field as "blank" if it contains watermark text. Thus, select the watermark text from the entered text.
• Do not send watermark text.
• Prevent the user from entering the watermark text itself :)
• Styling watermark text.
• etc. etc.

Answer 2

You can use the new HTML5 placeholder attribute.

Edit : update to use another hot HTML5 / jQuery, HTML5 data storage.

<input type="text" placeholder="type here" data-placeholder-text="type here" /> 

This will work in all modern browsers. And gracefully degrades in IE. However, for IE you will have to use javascript.

 $(document).ready(function() { var $input = $('#id_of_input_element'); $input.focus(function() { if($(this).val() == $(this).data('placeholder-text')) { $(this).val('') } }).blur(function() { if($(this).val() == '') { $(this).val($(this).data('placeholder-text')); } }).trigger('blur'); }): 

Answer 3

Functionality is known as a watermark and can be obtained in many ways, one of which

 onfocus="if(this.value=='Enter Email')this.value=''" onblur="if(this.value=='')this.value='Enter Email'" 

This will work for an email text field.

Answer 4

Here is the solution .

 $(".defaultText").focus(function(srcc) { if ($(this).val() == $(this)[0].title) { $(this).removeClass("defaultTextActive"); $(this).val(""); } }); $(".defaultText").blur(function() { if ($(this).val() == "") { $(this).addClass("defaultTextActive"); $(this).val($(this)[0].title); } }); $(".defaultText").blur(); 

Answer 5

you can try: using the title attribute to keep the default text

 $(function(){ $(".makedefault").bind("blur",function(){ if($(this).val().length == 0) { $(this).val($(this).attr('title')); } }); $(".makedefault").bind("focus",function(){ if($(this).val() == $(this).attr('title')) { $(this).val(""); } }); 

});

Answer 6

You can use this plugin (I am a co-author)

https://github.com/tanin47/jquery.default_text

He clones the input field and puts it there.

It works on IE, Firefox, Chrome, and even iPhone Safari, which has a known focus problem.

This way you don't have to worry about clearing the input field before submitting.

OR

If you want only HTML5, you can simply use the "placeholder" attribute in the input field

Answer 7

Here is my approach (with jQuery):

 <input id="myBox" type="text" /> <script> // Input field and default text var $element = $('#myBox'); var defaultText = 'Hello World'; $element.focus(function(){ // Focused $element.removeClass('defocused').addClass('focused'); if($element.val() == defaultText) $element.val(''); }).blur(function(){ // Defocused $element.removeClass('focused').addClass('defocused'); if($element.val() == '') $element.val(defaultText); }); // Initialization $element.blur(); </script>