如何禁用禁用输入框上的用户选择

Question

我正在尝试禁用一个已禁用的输入框上的用户选择。

我使用了pointer-events:none CSS属性来阻止对输入框的选择。

如果我将CSS应用于未禁用的输入框，它可以正常工作。

但由于某种原因，它无法在已禁用的输入框上起作用。请查看下面的代码：

<input type="text" disabled value="do not select" style="pointer-events: none;"/>

尝试了user-select:none，甚至这个也没有生效。

编辑：在火狐浏览器中，pointer-events:none运行良好，但在谷歌浏览器中不起作用。

- Harish

---

就算那个方法也不起作用，我已经尝试过了 :( @Terry - undefined

你想要实现什么目标？从你的问题中并不清楚。你所说的“防止输入框被选中”是什么意思呢？ - undefined

根据我的客户要求，我将在文本框中显示一些文本，并禁用输入框。由于这是一些敏感内容，我被要求防止对其进行选择，以便没有人可以复制文本。 - undefined

@Harish，你能包括受影响的浏览器吗？在具有pointer-events:none和user-select: none的禁用输入字段中，似乎只有在Chrome浏览器中才能选择文本。 - undefined

哦，我没有注意到这个。pointer-events:none在火狐浏览器中运行良好。只有在谷歌浏览器中我遇到了这个问题。@myf - undefined

Answer 1

我们可以使用一点CSS技巧，用另一个透明元素覆盖:disabled。

onselectstart = (e) => {e.preventDefault()} // total page select disabling, just to make sure 

.input-cover {
  position: relative; 
}
.for-disabled {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
input:disabled + .for-disabled{
  display: block;
}

<div class="input-cover">
  <input type="text" disabled value="do not select" />
  <div class="for-disabled"></div>
</div>
<br>
<div class="input-cover">
  <input type="text" value="select please" />
  <div class="for-disabled"></div>
</div>

- focus.style

---

好的，我会试一下。谢谢！ - undefined

Answer 2

您不需要专门编写 style="pointer-events: none;"，disabled 属性已经满足您的要求了。因为它被禁用了，所有与选择相关的属性也都被禁用了。我认为移除 style="pointer-events: none;" 就能达到您的目的。

- A K

---

我可能错了，我只是分析了你的问题并分享了我的想法。 - undefined

只是一个带有禁用属性的输入框并不能阻止对其进行选择。 - undefined

Answer 3

好的，我的之前的答案没起作用，我也试过了

<input id="my_input" type="text" value="Try to select me!" disabled unselectable="on" onselectstart="return false;" onmousedown="return false;"/>

不过这对于禁用的字段也无效，也许你可以将其设置为只读？

---

我认为你应该尝试使用user-select: none，更多信息在这里。
我想评论一下，但是我还没有足够的声望。

- PaoloJ42

---

即使在禁用的输入框上，该属性也无法起作用。 - undefined