预填表格字段

Question

所以我使用预填表格字段（如“名字”，“电话”或“邮政编码”）继承了此表单，以便用户知道如何处理这些字段。但是，如果有人只是按下按钮，表单会将“名字”，“电话”或“邮政编码”传递到数据库中。 onFocus中似乎没有工作。有什么想法吗？

<input type="" maxlength="25" name="firstname" tabindex="6" id="firstname" class="textfield" value="First Name" onFocus="if (this.value == 'First Name') {this.value = '';}">

提前致谢， -Bob

Answer 1

首先，这是不好的做法，标签应该是标签，放在他们标记的字段之前。不在里面。

Name: [________]
=== NOT ===
[Name____]

就像纸上的表格一样。

如果您必须在框中包含文字，请使用placeholder属性。但请注意，只有最新的浏览器才支持它。

至于解决提交默认值的问题，只需检查您要在数据库中输入的值是否为默认值，如果是，则阻止它。

Answer 2

除了Kolnik所说的，您可以使用以下内容对具有默认值的文本输入进行简单验证：

if ( input.value == input.defaultValue || /^\s*$/.test(input.value) ) {
    // field value isn't valid
}

检查值是否仍然是默认值，空或空格。但请记住，客户端验证完全不可靠，因此在服务器上进行真正的验证。

Answer 3

正如其他人所建议的那样，使用placeholder属性设置字段的“标签”。此外，如果您已经在使用jQuery来简化Javascript，则可以使用this one这样的插件，它将为非HTML兼容浏览器添加对占位符属性的支持。

这些插件通常还负责在将表单提交到服务器之前从字段中删除占位符文本的关键步骤，该服务器应将空值发送到服务器，而不是占位符文本。