开发者

jQuery to restore textbox default value

开发者 https://www.devze.com 2023-02-27 02:26 出处:网络
My code can do When clicking textbox, it empties the textbox. How to use jQuery to restore the default value if the nothing has been entered开发者_如何转开发 in the textbox? $(\'input\').focus(

My code can do When clicking textbox, it empties the textbox. How to use jQuery to restore the default value if the nothing has been entered开发者_如何转开发 in the textbox?


 $('input').focus(
    function()
    {
      if ($(this).val() == defaultValue)
      {
        $(this).val('');
      }
    })
    .blur(function()
    {
      if ($(this).val() == '')
      {
        $(this).val(defaultValue);
      }
    });

I would detect on load what the defaultValue is to use the user's data for a default if the page is a post back.


My answer is similar to Phil's where you store the contents in the data() for the object. Sort of like this (demo):

$('textarea')
  .bind('focusin', function(e){
    $(this)
     .data('content', $(this).val())
     .val('');
  })
  .bind('focusout', function(e){
    if ( $(this).val() === '' ){
      $(this).val( $(this).data('content'));
    }
  });


I wrote a jQuery plugin to do that.


Assuming you don't want to use placeholders or other HTML5-y goodness, try the following:

$('#myTextbox').click(function(){
   $(this).data('saved-text', $(this).val());
   // Now you can clear your text.
}).focusout(function(){
   $(this).val($(this).data('saved-text'));
});


You can use something like this:

    var defaultText = 'this is my default text';
    var controlObject = $('#idControl');
    controlObject.val(defaultText);

    controlObject.focusin(function (e) {
        var controlSelected = $(e.target);
        if (controlSelected.val() == defaultText) {
            controlSelected.val('');
        }
    }).focusout(function (e) {
        var controlSelected = $(e.target);
        if (controlSelected.val() == '') {
            controlSelected.val(defaultText);
        }
    });


I do it this way;

$('#textbox').focus(function(){
    if($(this).val() == 'Enter some text..')
        $(this).val('');
}).blur(function(){
    if($(this).val() == '')
        $(this).val('Enter some text..');
});


You can use following code for the textbox default value. It works for Textareas too. You just have to apply class "default-value" to all the text fields and textareas to whom you want to attach the default value functionality.

$('.default-value').each(function() {
        $(this).data("default_value",$(this).val());
        $(this).focus(function() {
            if($(this).val() == $(this).data("default_value")) {
                $(this).val("");
            }
        });
        $(this).blur(function() {
            if($(this).val() == '') {
                $(this).val($(this).data("default_value")) ;
            }
        });
    });

Another benifit of this code is that when you submit the form you can check if the field contains the original default value or not.

if( $(elem).val()==$(elem).data("default_value"))
{
 //Contains default value
}
else
{
 //Contains new value
}
0

精彩评论

暂无评论...
验证码 换一张
取 消