javascript清除字段值输入答案

【问题标题】：javascript clear field value inputjavascript清除字段值输入
【发布时间】：2013-09-05 20:29:17
【问题描述】：

我正在制作一个简单的表格，我有这个代码来清除初始值：

Javascript：

function clearField(input) {
    input.value = "";
};

html:

<input name="name" id="name" type="text" value="Name" onfocus="clearField(this);"/>

但我不想要的是，如果用户填写了输入但再次单击它，它就会被删除。我希望该字段仅在输入为空时才具有起始值“名称”。提前谢谢！

【问题讨论】：

您正在考虑占位符属性。
@remyabel 如果使用 HTML5！但我们只能希望新网站是对的？知道 IE10 之前不支持它绝对很重要。愚蠢的 IE :'(
嗯..在这种情况下，您将使用诸如modernizr之类的东西。
'defaultValue' 属性怎么样？

标签： javascript jquery html

【解决方案1】：

喜欢

<input name="name" id="name" type="text" value="Name" 
   onblur="fillField(this,'Name');" onfocus="clearField(this,'Name');"/>

和js

function fillField(input,val) {
      if(input.value == "")
         input.value=val;
};

function clearField(input,val) {
      if(input.value == val)
         input.value="";
};

更新

这里有一个demo fiddle 相同的

【讨论】：

这非常适合我的需求。如何清除表单中的另一个字段？而不是 clearField(this,'Name'); 中的“this”@ 允许我按名称访问表单的所有元素的文档结构是什么？

【解决方案2】：

对于不支持占位符属性的浏览器，这是一种使用 jQuery 的解决方案。

$('[placeholder]').focus(function() {
  var input = $(this);

  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);

  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();

在这里找到： http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

【讨论】：

这不再相关 - 99.5% 的用户支持占位符属性：caniuse.com/input-placeholder

【解决方案3】：

这可能是你想要的：

Working jsFiddle here

此代码将默认文本字符串 Enter your name here 放置在 <input> 文本框内，并将文本着色为浅灰色。
只要单击该框，就会清除默认文本并将文本颜色设置为黑色。
如果文本被擦除，默认文本字符串被替换并重置为浅灰色。

HTML：

<input id="fname" type="text" />

jQuery/javascript:

$(document).ready(function() {

    var curval;
    var fn = $('#fname');
    fn.val('Enter your name here').css({"color":"lightgrey"});

    fn.focus(function() {
        //Upon ENTERING the field
        curval = $(this).val();
        if (curval == 'Enter your name here' || curval == '') {
            $(this).val('');
            $(this).css({"color":"black"});
        }
    }); //END focus()

    fn.blur(function() {
        //Upon LEAVING the field
        curval = $(this).val();
        if (curval != 'Enter your name here' && curval != '') {
            $(this).css({"color":"black"});
        }else{
            fn.val('Enter your name here').css({"color":"lightgrey"});
        }
    }); //END blur()

}); //END document.ready

【讨论】：

jQuery 在这种情况下可能有点过分。但既然你正在这样做，我建议将“在此处输入你的名字”设置为变量名 - 更容易更新。颜色的想法相同（placehold_text、color_placehold 和 color_legal 或类似）
克罗斯比先生，重新使用变量的好处。我会照原样离开，让 OP 去看你的 cmets。至于 jQuery，<French Accent>Nevair 是 jQuery 太过分了！ </French Accent> - 此外，OP 标记了它，我认为它没问题。为什么要使用 javascript 并输入两倍？

【解决方案4】：

HTML：

<input name="name" id="name" type="text" value="Name" onfocus="clearField(this);" onblur="fillField(this);"/>

JS：

function clearField(input) {
  if(input.value=="Name") { //Only clear if value is "Name"
    input.value = "";
  }
}
function fillField(input) {
    if(input.value=="") {
        input.value = "Name";
    }
}

【讨论】：

【解决方案5】：

 var input= $(this);    
 input.innerHTML = '';

【讨论】：

【解决方案6】：

OP 的问题不再相关 - 该问题是在 2013 年提出的，当时占位符属性没有得到很好的支持。

现在你可以使用<input placeholder="Your text here">

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefplaceholder

【讨论】：