Question

我试图找出如何屏蔽文本输入中的文本，就好像它是一个密码字段，只是它没有。这是一个个人实验，我认为它可能听起来很奇怪，但它是我想尝试的东西，我已经使用replace方法将字符更改为星号，只有当我提醒值时，它会警告*当星号应该只是一个星号时面具和警报应该显示真实的价值，这是否有意义，如果是这样，任何人都知道如何做到这一点？

由于

Answer 1

嗯，这可能不是最好的主意，但是，您可以随时将输入的对象发送到隐藏的div并附加每段文本。

Answer 2

有两种方法可以理解，一种是实际接收输入的隐藏输入，而在可见输入列表中是星号。另一种方法是在替换input元素中的字符之前将其保存在变量中，并在用户输入变量时修改变量。

Answer 3

没有必要，当你需要做的就是设置一个简单的属性type="password"。

那就是说，作为一个实验，我甚至不确定你能否正确地做到这一点，因为需要大量代码来模拟密码字段的行为方式，其中一些可能无法实现。

你不仅要加入paste＆amp; keydown事件并覆盖它们的默认行为（在将剪贴板插入字段crossbrowser之前可靠地获取粘贴的剪贴板数据并不是那么容易），您必须处理字段内文本的完整和部分选择

最坏的情况可能是部分选择和粘贴事件。

至少这是一项非常重要的任务，我怀疑最终结果会让任何人感到骄傲;）

Answer 4

“明显”的解决方案（除了首先使用密码字段外）还有两个字段，即带掩码的显示字段和带有实际值的隐藏字段：

<input type="text" id="maskField1">
<input type="hidden" id="hiddenField1" name="field1">

<script>
$("#maskField1").keyup(function(e) {
    var newText = this.value.replace(/\*/g,"");
    $("#hiddenField1")[0].value += newText;
    this.value = this.value.replace(/[^*]/g,"*");
});
</script>

不幸的是，正如您在本演示中所看到的那样：http://jsfiddle.net/PrHuE/只有在当前文本的末尾添加更多字符时，它才有效。 真正的解决方案很多比这更复杂，因为您必须允许用户在字符串中间添加文本，或选择多个字符然后改写或明显删除或者从剪贴板粘贴等等。我正在捕获上面的密钥，但用户可以用鼠标粘贴，所以...

此外，如果用户实际输入了一些会混淆上述代码的星号。

你可以看到我只是在显示的掩码字段中取任何非星号字符，并在将非星号更改为星号之前将它们附加到隐藏字段的末尾。您可以在字符串中找到那些非星号字符的位置，并将它们插入隐藏字段中的相同位置。那不会太难。但是弄清楚哪些字符被删除（或替换）会比我在这里的时间更加困难。

解决方案2 ：创建您自己的字体，其中每个字符看起来像一个星号，然后将该字体嵌入您的网页并在输入字段中使用它。对于实际允许这种情况的浏览器，它将是一种无代码解决方案。对于那些不允许使用它的浏览器，它根本不起作用。

面具而不是替换？

4 个答案: