User Clicks In An Input Field And The Value Disappear

I search a script to disappear the value in an input field. A user click into and the value disappear and if the user doesn't write something into the input field it should be appe

Solution 1:

I bet you are looking for the mechanism that HTML5 attribute placeholder provides, just use it this way:

<input type="text" placeholder="This value will disappear" name="somename" value="" />

As for multiline placeholder for textarea, check this method:

https://stackoverflow.com/a/25261886/1477938

Solution 2:

You can use placeholder for this or else you can use value as placeholder. Just check it out

Placeholder based Value

jQuery(document).ready(function(){
    jQuery("input[type='text']").each(function(){
        var x = jQuery(this).attr("value");
        jQuery(this).focus(function(){
            if($(this).val()==x)
            {
                $(this).val('');
            }       
        });
        jQuery(this).blur(function(){
            if($(this).val()=="")
            {
                $(this).val(x);
            }
        });
    });
});

Using placeholder

<input type="text" placeholder="test">

Solution 3:

You can use placeholder property.

$(document).ready(function() {
  $('#input').focus(
    function() {
      if (!$(this).val().length || $(this).val() == $(this).data('placeholder')) {
        $(this).val('');
      }
    }
  );

  $('#input').blur(
    function() {
      if (!$(this).val().length) {
        $(this).val($(this).data('placeholder'));
      }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Text here" />
<br/>
<hr/>

<b>ALTERNATIVE (jQuery):</b>
<br/>

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