Question

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

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

谢谢！

Answer 1

更简单的方法可能是：

placeholder="Name"

Answer 2

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

所以你会：

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

Answer 3

这就是你应该怎么做的。

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

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

Answer 4

基本的javascript：

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

Answer 5

对于S＆amp; 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');
});

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

当我进入该字段时，如何让表单值消失？

5 个答案: