防止在没有指针事件的情况下单击:无

Preventing clicks without pointer-events:none

本文关键字：情况下 单击 事件 指针      更新时间：2023-09-26

我想在文本输入（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属性，浏览器将焦点切换到链接的表单字段。然后，例如，您可以通过在JavaScript中侦听focus事件来隐藏占位符。您需要设置占位符标签的样式才能使用position: absolute。请参阅实际示例（向下滚动查看某些表单）。

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

  1. 实际上，您为字段定义了一个标签。这可能有助于访问
  2. 您可以将表单字段的值和占位符文本分开，这样您就可以支持部分填充的表单
  3. 您可以支持比使用placeholder属性更多的浏览器
  4. 您可以随心所欲地设置label标记的样式，这对于placeholder属性来说并不容易。你甚至可以使用CSS或JS动画
相关文章：