Question

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

pointer-events:none的变通方法通常涉及手动触发子元素的onclick。但是，对于文本输入，onclick由浏览器隐式完成，因此不会触发任何事件。

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

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

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

Answer 1

您可以在没有Javascript的情况下执行此操作。只需使用<label>标记，如下所示：

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

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

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