我想在文本输入(input type='text' 或 textarea)上方放置一个自定义占位符文本元素。但是，当占位符文本元素位于其正上方时，我无法弄清楚如何使文本输入可点击。设置 pointer-events:none 使占位符不可点击效果很好，但在旧版本的 IE 中不受支持。
pointer-events:none 的解决方法通常涉及手动触发子元素的 onclick。但是，对于文本输入，onclick 是由浏览器隐式完成的，因此不会触发任何事件。
我考虑过的其他解决方案包括在占位符上设置 onclick 以聚焦文本输入，但这意味着光标始终位于输入的末尾。我希望能够单击文本输入并使光标出现在我单击的位置。
另一种选择是使用z-index 将占位符放在输入下方，然后使输入透明。但是，这也会删除输入的默认边框，这是不受欢迎的。
仅使用 HTML/CSS 和纯 Javascript(无 jquery)，即使文本显示在文本输入上方，文本输入如何实现可点击？
最佳答案
您可以在没有 Javascript 的情况下执行此操作。只需使用 <label>像这样的标签:
<label class="placeholder" for="name">Name</label>
<input type="text" id="name">
通过使用 for和 id单击标签时，浏览器会将焦点切换到链接的表单域。然后您可以通过监听 focus 来隐藏占位符。 JavaScript 中的事件。您需要设置占位符标签的样式才能使用 position: absolute .参见 live example (向下滚动查看某些表格)。
上述定义占位符文本的方法有一些优点:
- 您实际上为字段定义了标签。这可能有助于辅助功能。
- 您将表单字段的值和占位符文本分开，因此您可以支持部分填写的表单。
- 与使用
placeholder相比，您可以支持更多的浏览器属性。 - 您可以设置
label的样式标记但是你喜欢，这对于placeholder来说并不容易属性。您甚至可以使用 CSS 或 JS 动画!
关于javascript - 防止没有指针事件的点击 :none，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18452597/