jquery - 禁止用户在输入中选择文本

Question

我承认我有点困惑为什么这不起作用。

我有一个我正在屏蔽的输入，它工作得很好，但似乎如果你选择文本，它就会“揭示”真正的值(value)。

为了解决这个问题，我想禁止用户突出显示输入中的文本。在你说这是糟糕的可用性之前，我只在触摸屏上工作，如果他们点击太多次，这真的只会阻止它突出显示。

我试过

-webkit-user-select: none;  
 -moz-user-select: none;    
 -ms-user-select: none;      
 user-select: none;

在两个输入上，但它仍然想选择。还有其他方法可以做到这一点吗？这是我四处搜索时所能找到的所有内容。

这里有一个可以玩的 fiddle 。 http://jsfiddle.net/gtom9tvL/1/

Answer 1

如果你想这样做，你可以使用 pointer-events: none在较低的输入和 text-indent: -9999px从视口(viewport)中删除未屏蔽的文本。

缺点

• 输入中没有克拉(尽管我猜这可以用 javascript 模拟)

---

我会使用:<input class='value' type="password" />这样就无法使用 ctrl + a 选择文本并复制粘贴。

Have a fiddle!

CSS

.num {
    position: relative;
}
.value {
    text-indent: -9999px;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
}
.number {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}