Clear focus input using jQuery and return to blur

Question

It almost works. However, when you exit the field, a "defaulttext" appears, not the original text value. Not sure how the echo variable inside defaultText is most efficient.

  $ (function () {
     var defaultText = $ (this) .val ();
     $ ('input [type = text]'). focus (function () {
       $ (this) .val ('');
       });
      $ ('input [type = text]'). blur (function () {
       $ (this) .val ('defaultText');
       echo 
       });
  });

Answer 1

$(function() { var input = $('input[type=text]'); input.focus(function() { $(this).val(''); }).blur(function() { var el = $(this); /* use the elements title attribute to store the default text - or the new HTML5 standard of using the 'data-' prefix ie: data-default="some default" */ if(el.val() == '') el.val(el.attr('title')); }); }); 

---

Update

Browsers are gradually introducing the placeholder attribute, which provides the user with the ability to display a "hint".

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder

Answer 2

You need to remove the labels "around the default variable" in the set (val) method.

Try something along the lines of hte

 $(function() { var defaultText = ''; $('input[type=text]').focus(function() { defaultText = $(this).val(); $(this).val(''); }); $('input[type=text]').blur(function() { $(this).val(defaultText); // NB removed the ' ' marks //echo // What are you trying to echo? }); }); 

Answer 3

This solution requires jQuery!

I wrapped this function in the utils module as follows:

 var utils = (function () { var utils = {}; //some other properties... utils.setupAutoclearInputs = function() { $('.input-autoclear').each(function() { $(this).data('default', $(this).val()).addClass('gray'); }).focus(function(e) { if (!($(this).val() !== $(this).data('default'))) { $(this).removeClass('gray').addClass('black').data('modified', true).val(''); } }).blur(function(e) { if (!($(this).val() !== $(this).data('default')) || $(this).val() === '') { $(this).removeClass('black').addClass('gray').val($(this).data('default')); } }); } //some other methods... return utils; }()); 

In HTML:

Add: class="input-autoclear" to each input you want to include.

Set the default value: <input ... value="defaultValue" ... >

Create some CSS classes for gray and black text or whatever.

Personally, I use .gray { ... } and .black { ... } , but you may need better names.

Finally:

Run the utils modules method using:

 $(document).ready(function() { ... utils.setupAutoclearInputs(); ... } 

Make sure that the code for the module lives outside the document.ready document, and you probably want it in the global area of ​​your application.

Read more about how to write javascript modules correctly in the article.

Answer 4

This file will save the default text for you using the .data () function. Therefore, there is no need for additional markup.

 $('input').focus(function() { if (!$(this).data("DefaultText")) $(this).data("DefaultText", $(this).val()); if ($(this).val() != "" && $(this).val() == $(this).data("DefaultText")) $(this).val(""); }).blur(function(){ if ($(this).val() == "") $(this).val($(this).data("DefaultText")); }); 

Answer 5

The simplex writes $(this).val(defaultText): without 'else, it will not consider it as a variable.

Answer 6

Use the HTML5 placeholder attribute for each input tag, for example:

 <input type="text" value="original text value" placeholder="default value" /> 

Answer 7

You are not referring to the defaultText variable. You are passing a string because it is enclosed in quotation marks.

 $(function() { var defaultText = $('input[type=text]').val(); $('input[type=text]').focus(function() { $(this).val(''); }); $('input[type=text]').blur(function() { $(this).val(defaultText); // fixed! }); }); 

Answer 8

Try this in your firebug:

 $(function() { console.log($(this)) }); 

You will find out that

 var defaultText = $(this).val(); 

probably not what you want.

If the initial value for input is the default text, get it as follows:

 var defaultText = $('input[type=text]').val() 

Remember that this will only work correctly if there is only one input text on your page.

And also remove the quotation marks in:

 $(this).val('defaultText'); 

Answer 9

 var q = $('#q'); q.focus(function() { if ($(this).attr('data-default') == $(this).val()) { $(this).val(''); } }).blur(function() { if($(this).val() == '') { $(this).val($(this).attr('data-default')); } }); <input type="text" name="q" id="q" data-default="Search..." value="Search..."/> 

Answer 10

  $('.myclass').each(function() { var default_value = this.value; $(this).css('color', '#666'); // this could be in the style sheet instead $(this).focus(function() { if(this.value == default_value) { this.value = ''; $(this).css('color', '#333'); } }); $(this).blur(function() { if(this.value == '') { $(this).css('color', '#666'); this.value = default_value; } }); }); <input type="text" class="myclass" size="30" value="type here" /> 

Answer 11

It works! I use it myself:

 /* Forminputs löschen und wiederherstellen */ jQuery(function() { var input = jQuery('#userForm input[type=text], #userForm textarea'); input.focus(function() { jQuery(this).attr('data-default', jQuery(this).val()); jQuery(this).val(''); }).blur(function() { var el = jQuery(this); if (el.val() == '') el.val(el.attr('data-default')); }); }); 

Answer 12

I lost this code a bit.

 $(document).ready(function () { var defaultText = ''; $('.input-focus-clear').focus(function () { defaultText = $(this).val(); $(this).val(''); }); $('.input-focus-clear').blur(function () { var newText = $(this).val(); if (newText.length < 1) { $(this).val(defaultText); } }); });