在 textbixes 和 textareas 中显示默认文本的最佳方法是啥

Posted 2023-04-18

【中文标题】在 textbixes 和 textareas 中显示默认文本的最佳方法是啥

【英文标题】：what the best way to display a default text in textbixes and textareas在 textbixes 和 textareas 中显示默认文本的最佳方法是什么

【发布时间】：2010-11-07 14:08:11

【问题描述】：

我网站的contact -us html页面上的一个表单有两个字段

1) 主题

2) 消息

当页面首次加载时，我希望这两个框显示“在此处输入主题”和“在此处输入消息”之类的消息。

我发现我们可以通过使用文本框的“值”属性来做到这一点，这是最好的方法吗??.. 我有什么替代方案来实现这一目标？

【参考方案1】：

是的，这是最好的方法。然后，您可以在元素获得焦点时使用 javascript 清空文本输入/区域。请记住考虑如何处理用户提交默认文本的情况。即，“输入用户名”是否是有效的用户名？

【参考方案2】：

哦，我真的需要写完关于这个主题的文章。这是未抛光的版本：

首先——描述在字段中输入内容的消息不是默认值。默认值是可以想象提交的内容（例如基于 GeoIP 输入的国家/地区，或来自客户记录的送货地址）。

第二——使用默认值作为假标签，然后在用户关注它时擦除它（大概你不希望用户必须手动删除消息）会导致可访问性问题。屏幕阅读器会读出被聚焦的内容，如果你在它成为焦点时将其删除，他们将无法获取信息。

在我看来，最佳选项是在控件旁边放置一个<label>。网页通常不会缺少空间——滚动条并不邪恶。

如果您真的希望它看起来像在控件中，那么：

将<label> 和<input> 放入<div> 使用 JavaScript 在 <div> 上设置一个类（所以你没有垃圾体验是 JS 不可用） 应用 CSS 将 <div> 设置为 position: relative 并为其指定大小。 制作background 的<input> transparent 并设置样式以填充div Position<label> 下<input> 编写一个函数来检查输入的值是否为空字符串。根据答案打开和关闭 div 上的课程。 在 div 上设置该类时，将 text-indent 设置为较大的负长度（例如 -999em），以便文本在屏幕外隐藏（但仍可供屏幕阅读器使用）

【讨论】：

+1。创新、干净且易于使用的解决方案！不过需要开发人员付出更多的努力（这并不是真正的批评，只是一种观察）

我刚记起来，在playfire.com（靠近页面中间/右侧的大登录表单）有一个例子（我认为这是我的第一个实现）

谢谢伙计们。我会选择 David 的。这样我就省去了验证 inout 的必要性，以检查用户是否提交了默认值（如 Machine 所述）。谢谢大家