1

我想在文本输入（input type='text'或textarea）上方放置一个自定义占位符文本元素。但是，当占位符文本元素位于其正上方时，我无法弄清楚如何使文本输入可点击。设置pointer-events:none为使占位符不可点击效果很好，但旧版本的 IE 不支持。

pointer-events:none通常涉及手动触发onclick子元素的解决方法。但是，对于文本输入，这onclick是由浏览器隐式完成的，因此没有要触发的事件。

我考虑过的其他解决方案包括onclick在占位符上设置一个以聚焦文本输入，但这意味着光标始终位于输入的末尾。我希望能够单击文本输入并使光标出现在我单击的位置。

另一种选择是使用z-index将占位符放在输入下方，然后使输入透明。但是，这也删除了输入的默认边框，这是不可取的。

即使文本显示在其上方，如何仅使用 HTML/CSS 和纯 Javascript（无 jquery）来点击文本输入？

4

1 回答 1

4

您可以在没有 Javascript 的情况下执行此操作。只需使用这样的<label>标签：

<label class="placeholder" for="name">Name</label>
<input type="text" id="name">

通过在点击标签时使用forandid属性，浏览器会将焦点切换到链接的表单字段。focus然后，您可以通过侦听JavaScript 中的事件来隐藏占位符。您需要设置要使用的占位符标签的样式position: absolute。查看实时示例（向下滚动查看某些表格）。

上述定义占位符文本的方法有一些优点：

  1. 您实际上为字段定义了一个标签。这可能有助于可访问性。
  2. 您将表单字段的值和占位符文本分开，因此您可以支持部分填充的表单。
  3. 与使用该placeholder属性相比，您可以支持更多的浏览器。
  4. 您可以根据自己的喜好设置标签的样式，这对于属性label来说并不容易。placeholder您甚至可以使用 CSS 或 JS 动画！
于 2013-08-26T20:49:22.527 回答