CODEWITHSUNDEEP
javascriptkeypresskeyevent
Tomáš Zato
Tomáš Zato

Reputation: 53318

Change event input character

Is it possible to simply change the character, that is written in the text field, by changing some of the event object properties? For example, I want to hide password characters from command:
User types:

login username password

I want to appear:

login username ********

And save password to variable. So, i want to remap any key to * once the textbox.value contains /^login [a-zA-Z0-9]+ /.

Edit - respectfully to comments speaking of misunderstanding my question:
Because all above happens within a little command line client, and there may be multiple commands, that I may want to protect by * obfuscation, no thoughts of using <input type="password" /> are acceptable!

Upvotes: 2

Views: 4748

Answers (2)

Teemu
Teemu

Reputation: 23416

This snippet does the trick. It's not perfect, but can be developed further.

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 is a pipe-separated list of all words, which should have one visible parameter after it, and after that parameter there will be stars on the textfield until to next space. If the command is not on the list, the third parameter won't be obfuscated.

If you want to detect more than one occurrence of these kind of combinations on the same line, just use the regexp below:

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

The real value of the "command text" is stored in commandString.

Notice that this implementation is not protected against text editing by mouse or clipboard. Also when run on Firefox, BACKSPACE won't empty the field before user starts write again.

A live demo at jsFiddle.

EDIT

Actually your question was about overriding Event object properties. In general those properties are read-only, and can't be modified. However, there seems to be an exception for the rule: at least IE9 allows modifying of the window.event.keyCode within onkeypress handler. The snippet below really works in IE9 when calling inline onkeypress=capitalize(), but not with handler attached by addEventListener().

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

Upvotes: 2

Muhammad Hani
Muhammad Hani

Reputation: 8664

You can use the input type=password, but for any other reasons, the below script will do the job for you.

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;   
}

Upvotes: 1

Related Questions