Html 当我进入该字段时，如何让表单值消失？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1505208/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get form values to disappear when I enter the field?
提问by forrest
I am making a simple form with about eight input fields. I want the initial value in the field to indicate what people are supposed to enter. For example value="name" so that people know to enter there name there.
我正在制作一个包含大约八个输入字段的简单表单。我希望字段中的初始值指示人们应该输入的内容。例如 value="name" 以便人们知道在那里输入名称。
My question though is how do you get the initial value to vanish when they enter that field so that the initial value is only a hint and not a permanent value that they have to erase before they can type in their name?
我的问题是，当他们进入该字段时，如何让初始值消失，以便初始值只是一个提示，而不是他们在输入名称之前必须擦除的永久值？
Thanks!
谢谢！
回答by Matt
A much easier way could possibly be:
一个更简单的方法可能是：
placeholder="Name"
回答by Erich
Set the 'default' value to "Name". Then, using javascript and the 'onfocus' event, clear the field.
将“默认”值设置为“名称”。然后，使用 javascript 和 'onfocus' 事件，清除该字段。
So you would have:
所以你会有：
<input type="textbox" value="Name" onfocus="if (this.value=='Name') this.value='';"/>
回答by Mickey
This is how you should do it.
这就是你应该做的。
<input type="text" value="name" onfocus="this.value = this.value=='name'?'':this.value;" onblur="this.value = this.value==''?'name':this.value;">
If they click on it and click off the default value will go back. If they click on it and type something in, it won't try to erase what they put if they go back to click on it again.
如果他们单击它并单击关闭，则默认值将返回。如果他们点击它并输入一些东西，如果他们再次点击它，它不会尝试删除他们输入的内容。
回答by Daniel Sorichetti
Basic javascript:
基本的javascript：
<input type="text" value="name" onfocus='if(this.value=="name"){this.value="";}' />
回答by twiz
Just for S&G's I thought I would post a reusable jQuery solution for this problem.
只是为了 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
}
}();
Then you just have to attach each element using an ID attribute value. Like so:
然后您只需使用 ID 属性值附加每个元素。像这样：
$(function(){
formDefaulter.add('contact_name');
formDefaulter.add('contact_email');
formDefaulter.add('contact_msg');
});
This also refills the form element with its original value if its content is deleted. Anyway, hopefully this is helpful to someone.
如果其内容被删除，这也会用其原始值重新填充表单元素。无论如何，希望这对某人有帮助。
