Question

我使用下面的代码显示隐藏焦点上的默认输入值。但是，我将在一个页面上使用一些表单，并且真的不想为每个输入字段创建这个js，非常耗时并且可能有点太多js。

HTML

<input type="text" class="sb" value="Search CT..."/>

的Javascript

 //search box
 $("input.sb").focus(function(){
     if ( $(this).val() == "Search CT...")
    $(this).val('');
 });
 $("input.sb").blur(function(){
     if ( $(this).val() == "")
     $(this).val('Search CT...');
 });

我想知道是否有办法创建一些通用JS来显示/隐藏默认值，无论其内容是否适用于所有表单输入？

希望这很有意义，非常感谢。

Answer 1

此代码将查看页面加载时的所有文本输入元素和textarea元素。它将使用$.data存储其原始值。然后它会在适当时进行清空和重新填充。

$(document).ready(function(){
    $('form input:text, form textarea').each(function(){
        $.data(this, 'default', this.value);
    }).focus(function(){
        if ($.data(this, 'default') == this.value) {
            this.value = '';
        }
    }).blur(function(){
        if (this.value == '') {
            this.value = $.data(this, 'default');
        }
    });
});

Answer 2

尝试以下代码 -

$(document).ready(function(){
    var value = '';
    $("input.sb").focus(function(){
     value = $(this).val();
     if (value != ""){ 
        $(this).val('');
     }
     });
     $("input.sb").blur(function(){
     if ( $(this).val() == ""){
         $(this).val(value);
     }
     });

});

Answer 3

看起来你正在使用jQuery。你尝试过使用插件吗？

这是一个可以满足您需求的： http://plugins.jquery.com/content/default-text-inputtext-fields-required-rule-modification

Answer 4

你可以创建一个或多或少像这样的地图：

<强>的Javascript

function setEvents( id, txt ){
  $("#" + id)
    .focus(function(){
      if ( $(this).val() == txt) $(this).val('');
    })

    .blur(function(){
      if ( $(this).val() == "") $(this).val(txt);
    });
}

var map = {
  input1: "your text",
  input2: "other text"
};

for(var i in map){
  setEvents( i, map[i] );
}

地图对象的键表示输入ID，值表示默认值

Answer 5

$("input").focus(function(){ 
            $(this).val(''); 
 });

或为每个输入字段提供一个公共类

表单输入显示隐藏焦点上的默认值

5 个答案: