2

是否可以通过更改某些event对象属性来简单地更改文本字段中写入的字符？例如，我想从命令中隐藏密码字符：
用户类型：

登录用户名密码

我想出现：

登录用户名********

并将密码保存到变量中。所以，我想将任何键重新映射*到textbox.value包含/^login [a-zA-Z0-9]+ /.

编辑- 尊敬的评论谈到误解我的问题：
因为以上所有都发生在一个小命令行客户端中，并且可能有多个命令，我可能想通过*混淆来保护，所以没有使用的想法<input type="password" />是可以接受的！

4

2 回答 2

2

这个片段可以解决问题。它并不完美，但可以进一步发展。

window.onload = function () {
    var cmdfield = document.getElementById('cmdfield'),
        commandString = '',
        cmds = '(login|logout)',
        rex = new RegExp('^' + cmds + ' [a-zA-Z0-9]+ (\\w*)'),
        keyPress = function (e) {       
            if ((e.which > 64 && e.which < 123) || (e.which > 47 && e.which < 58) || e.which === 32) {
                commandString += String.fromCharCode(e.which);
                this.value = commandString.replace(rex, function (m, a, b) {
                    var command = m.split(' ')[0],
                        param = m.split(' ')[1],
                        len = b.length;
                    if (len > 0) {
                        return command + ' ' + param + ' ' + new Array(len + 1).join('*');
                    }
                    if (len === 0) {
                        return command + ' ' + param + ' ';
                    }
                });
            }
            e.preventDefault();
            return;
        },
        keyDown = function (e) {
            if (e.which === 8) {
                commandString = commandString.substring(0, commandString.length - 1);
                e.stopPropagation();
                return;
            }
            if (!((e.which > 64 && e.which < 122) || (e.which > 47 && e.which < 58) || e.which === 32)) {
                e.preventDefault();
            }
            return;
        };
    cmdfield.addEventListener('keydown', keyDown, false);
    cmdfield.addEventListener('keypress', keyPress, false);
}

cmds是所有单词的管道分隔列表，它后面应该有一个可见参数，并且在该参数之后，文本字段上将有星号，直到下一个空格。如果该命令不在列表中，则不会混淆第三个参数。

如果您想在同一行中检测多个此类组合的出现，只需使用下面的正则表达式：

rex = new RegExp('\\b' + cmd + ' [a-zA-Z0-9]+ (\\w*)', 'g'),

“命令文本”的实际值存储在commandString.

请注意，此实现不受鼠标或剪贴板文本编辑的保护。此外，在 Firefox 上运行时，BACKSPACE在用户再次开始写入之前不会清空该字段。

jsFiddle的现场演示。

编辑

实际上你的问题是关于覆盖Event对象属性。一般来说，这些属性是只读的，不能修改。但是，该规则似乎有一个例外：至少 IE9 允许修改 insidewindow.event.keyCode处理onkeypress程序。当调用 inline 时，下面的代码片段在 IE9 中确实有效onkeypress=capitalize()，但不适用于附加的处理程序addEventListener()。

function capitalize() {
    key = window.event.keyCode;
    if (key > 96 && key < 123) {
        window.event.keyCode = window.event.keyCode - 32;
    }
    return window.event.keyCode;
}
于 2013-02-27T19:40:13.507 回答
1

您可以使用input type=password，但出于任何其他原因，以下脚本将为您完成这项工作。

var field = document.getElementById("password")
var val= "";
field.onkeydown = function(evt){
    val+= String.fromCharCode(evt.keyCode)      
    this.value = val.replace(/./g,"*");      
   document.getElementById("hiddenfieldPassword").value = val; // Hidden Field to store the password.
  return false;   
}
于 2013-02-27T15:02:16.097 回答