更改事件输入字符

Change event input character

本文关键字：字符 输入 事件      更新时间：2023-09-26

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

登录用户名密码

我想要出现:

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

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

编辑 -恭敬地说到误解我的问题的评论:
因为所有这些都发生在一个小的命令行客户端中，并且可能有多个命令，我可能希望通过*混淆来保护它们，所以使用<input type="password" />的想法是不可接受的!

下面的代码段可以做到这一点。它不是完美的，但可以进一步发展。

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是一个由管道分隔的所有单词列表，它后面应该有一个可见的参数，在该参数之后，文本字段上会有星星，直到下一个空格。如果命令不在列表中，则不会混淆第三个参数。

如果您想在同一行中检测这些类型的组合的多个出现，只需使用下面的regexp:

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

"命令文本"的实际值存储在commandString中。

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

jsFiddle的实时演示。

编辑

实际上你的问题是关于重写Event对象属性。一般来说，这些属性是只读的，不能修改。然而，这个规则似乎有一个例外:至少IE9允许在onkeypress处理程序中修改window.event.keyCode。当调用内联onkeypress=capitalize()时，下面的代码片段确实可以在IE9中工作，但不能使用addEventListener()附加的处理程序。

function capitalize() {
    key = window.event.keyCode;
    if (key > 96 && key < 123) {
        window.event.keyCode = window.event.keyCode - 32;
    }
    return window.event.keyCode;
}

您可以使用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;   
}
相关文章：