输入字段时如何使表单值消失？答案

【问题标题】：How do I get form values to disappear when I enter the field?输入字段时如何使表单值消失？
【发布时间】：2010-12-03 01:49:29
【问题描述】：

我正在制作一个包含大约八个输入字段的简单表单。我希望该字段中的初始值指示人们应该输入的内容。例如 value="name" 以便人们知道在那里输入名称。

不过，我的问题是，当他们输入该字段时，如何让初始值消失，以便初始值只是一个提示，而不是他们必须在输入名字之前删除的永久值？

谢谢！

【问题讨论】：

标签： html forms webforms

【解决方案1】：

将“默认”值设置为“名称”。然后，使用 javascript 和 'onfocus' 事件，清除该字段。

所以你会：

<input type="textbox" value="Name" onfocus="if (this.value=='Name') this.value='';"/>

【讨论】：

记得点击投票下方的绿色勾号将答案选为“已接受”。

【解决方案2】：

基本的javascript：

<input type="text" value="name" onfocus='if(this.value=="name"){this.value="";}' />

【讨论】：

【解决方案3】：

你应该这样做。

<input type="text" value="name" onfocus="this.value = this.value=='name'?'':this.value;" onblur="this.value = this.value==''?'name':this.value;">

如果他们点击它并点击关闭默认值将返回。如果他们点击它并输入一些东西，如果他们再次点击它，它不会尝试删除他们输入的内容。

【讨论】：

【解决方案4】：

一个更简单的方法可能是：

placeholder="Name"

【讨论】：

我认为这样做的问题是它会删除可能对用户不利的输入文本。
对占位符的支持相当不错：caniuse.com/#feat=input-placeholder

【解决方案5】：

对于 S&G，我想我会针对这个问题发布一个可重用的 jQuery 解决方案。

var formDefaulter=function(){
    //Class to hold each form element
    var FormElement=function(element){
        var that=this;
        this.element=element;

        var initialVal=this.element.val();
        var isEdited=false;

        this.element.focus(function(){clearBox()});
        this.element.blur(function(){fillBox()});

        var clearBox=function(){
            if(!isEdited){
                that.element.val("");
                isEdited=true;
            }
        }
        var fillBox=function(){
            if(that.element.val()==""){
                that.element.val(initialVal);
                isEdited=false;
            }
        }
    }

    var add=function(elementId){
        new FormElement($('#'+elementId));
    }

    return{
        add:add
    }
}();

然后您只需使用 ID 属性值附加每个元素。像这样：

$(function(){
    formDefaulter.add('contact_name');
    formDefaulter.add('contact_email');
    formDefaulter.add('contact_msg');
});

如果它的内容被删除，这也会用它的原始值重新填充表单元素。无论如何，希望这对某人有所帮助。

【讨论】：