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

我想在文本输入上方放置一个自定义占位符文本元素（

input type='text'

或

textarea

）。但是，当占位符文本元素位于文本输入的正上方时，我不知道如何使文本输入可单击。设置

指针事件：none

以使占位符不可读取效果很好，但在旧版本的IE中不受支持

指针事件的解决方法：无

通常涉及手动触发子元素的

onclick

。但是，对于文本输入，

onclick

由浏览器隐式完成，因此没有要触发的事件

我考虑过的其他解决方案包括在占位符上设置一个

onclick

，以聚焦文本输入，但这意味着光标总是放在输入的末尾。我希望能够单击文本输入，并将光标显示在我单击的位置

另一个选项是使用

z-index

将占位符放置在输入下方，然后使输入透明。但是，这也会删除输入的默认边框，这是不需要的

---

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

您可以在没有Javascript的情况下执行此操作。只需使用如下的

标记：

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

名称

单击标签时，通过使用

for

和

id

属性，浏览器将焦点切换到链接表单字段。然后，您可以通过监听JavaScript中的

focus

事件来隐藏占位符。您需要设置占位符标签的样式，以使用

位置：绝对值
。请参阅（向下滚动查看某些表单）

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

实际上，您为字段定义了一个标签。这可能有助于提高可访问性
您可以分离表单字段的值和占位符文本，以便支持部分填充的表单
与使用
占位符
属性相比，您可以支持更多的浏览器
您可以随意设置标签的样式，这对于占位符属性来说并不容易。你甚至可以使用CSS或JS动画
您可以在没有Javascript的情况下实现这一点。只需使用如下的
标记：

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

名称

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

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

实际上，您为字段定义了一个标签。这可能有助于提高可访问性
您可以分离表单字段的值和占位符文本，以便支持部分填充的表单
与使用
占位符
属性相比，您可以支持更多的浏览器
您可以随意设置标签的样式，这对于占位符属性来说并不容易。你甚至可以使用CSS或JS动画
隐藏覆盖层很容易。选择整个文本很容易。计算文本框中的坐标，并将它们映射到文本中，然后将光标放在那里……嗯，这很难。我很难理解你想要实现什么。当你说“就在它上面”时，你是指就在它前面，还是在输入上面渲染文本，使文本模糊输入中的内容？我认为
元素就是你想要的。这样回答对你有帮助吗@如果我能计算出一个给定的点击位置对应多少个字符，这就行了。你知道这是否可行吗？隐藏覆盖层很容易。选择整个文本很容易。计算文本框中的坐标，并将它们映射到文本中，然后将光标放在那里……嗯，这很难。我很难理解你想要实现什么。当你说“就在它上面”时，你是指就在它前面，还是在输入上面渲染文本，使文本模糊输入中的内容？我认为
元素就是你想要的。这样回答对你有帮助吗@如果我能计算出一个给定的点击位置对应多少个字符，这就行了。您知道这是否可行吗？这与直接设置文本输入的焦点有相同的问题：您无法选择光标的位置。否则，这是一个很好的解决方案，但这不是我想要的。占位符不是用来作为初始表单字段值的，而是用来提示的。它们通常会在焦点上消失，或者当用户将第一个字符键入一个字段时。是的，但是如果已经有一段文本，则不能在其中间单击并开始键入。单击将光标定位在文本的开头或结尾，具体取决于元素的类型。您可以描述一下您的用例吗？你想要一个可编辑的占位符吗？为什么不能在
输入
元素上使用
值
属性？对不起，这毕竟没问题。我缺少的一点是，我需要在占位符元素不显示时隐藏或删除它，而不仅仅是删除它的文本。这与直接设置文本输入的焦点有相同的问题：您无法选择光标的位置。否则，这是一个很好的解决方案，但这不是我想要的。占位符不是用来作为初始表单字段值的，而是用来提示的。它们通常会在焦点上消失，或者当用户将第一个字符键入一个字段时。是的，但是如果已经有一段文本，则不能在其中间单击并开始键入。点击p