Replace a part of text in textbox while typing text in it

Question

The format of text in the text box is like this:

login -u username -p password

While typing this text I want to replace 'password' with number of '*' equal to its length. So if I type:

' login -u abc@abc.com -p abc ' in text box it should display like this:

login -u abc@abc.com -p ***

And also I need to store the actual password which is being replaced.

Is there a possible way? Thank you in advance

Answer 1

You can use multiple text boxes and still make it look like one, command prompt. Using CSS you remove left, right borders and join them close enough. On keypress event of each textbox, check if the user typed space and change the focus to next textbox. This solution works provided you have some fixed format of input to be taken.

Answer 2

The way you need to look at your requirement needs to be change. Why you need to get data from user with nly one input?

You need to collect username and password differently and then you can merge the same on form submit.

$("#submit").click(function(){
    $output = "login -u " + $("#username").val() + " -p " + $("#password").val();
    alert($output);
    return false;
});

http://jsfiddle.net/kiranvarthi/j8gL9mvx/1/

Answer 3

You should parse the input value using regular expression, ie

<input type="text" id="inputText" />
<input type="hidden" id="actualPassword" /> <!-- Another element to store actual password -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// Function to repeat string n times */
var StringUtilities = {
    repeat: function(str, times) { 
       return (new Array(times + 1)).join(str);
    }
};
$(function(){
    $('#inputText').keyup(function(){ 
        var test = /(login[\s]+\-u[\s]+[a-zA-Z0-9@\.\s]+\-p[\s]+)(.*)/i.exec( $(this).val() ); //'login -u user123 -p password123'      
        if(test !== null)
        { 
            if( $('#actualPassword').val().length < $.trim(test[2]).length )
                $('#actualPassword').val( $('#actualPassword').val() + test[2].slice(-1) );
            else
                $('#actualPassword').val($('#actualPassword').val().slice(0, test[2].length));

          $(this).val( test[1] + StringUtilities.repeat( '*', test[2].length) );     
        }
    });
});
</script>

JS FIDDLE: http://jsfiddle.net/nmx04h1o/3/

Answer 4

Do not do it. You can see what i've tried at the bottom of my answer.

I played around with this problem a littlebit, but when i did a facing myself another problems.

There are 2 method to do this. 1st is, when a user enter a character, you need to use the keyup function.

So, you can write a regular expression, what is catching the -p andsomecharactersherewhileitsnotspace .

Ok, the first method is to catch the last character of users password, and contcat it to a hidden field. Me and Apul Gupta tried this.

For some reason, both of our code is mess up the password, because for some reason, what i do not know, there will be * characters if you are typing to fast. I tried to replace those * characters, but in this case, some characters are lost from the password.

The other way is to get the character from keyup event. This is bad, because String.fromCharCode is returning always uppercase characters, since, keyup do not know, is there a SHIFT or CAPS LOCK happens. Maybe now you think, you can handle it, but you can not. SHIFT is simple, but you don't know, was the CAPS LOCK was turned on befor or not.

A solution could be for this, if you allow users only lowercase or only uppercase passwords, but this is bad because weekening the password.

So, think a littlebit more. Let's say, somehow we can use one of the solution. Then this whole things turn to a very complex thing, what are too expensive i think. Because, you should handle, what happens, if a user just SHIFT, LEFT ARROW, DELETE the password. You need to check, what selected with that combination of keyperss, where was the cursor, etc...

I suggest you to forget this, or try to find another way to do it.

Kiran Varthis answer is the best option i think.

What i've tried:

<input type="text" name="userInput" id="userInput" value="" />
<input type="hidden" value="" name="hiddenPassword" id="hiddenPassword" />
<script type="text/javascript">
    $(function() {
        String.prototype.repeat = function(num) {
            return new Array(num + 1).join(this);
        }
        //46 = delete key
        $("#userInput").keyup(function(e) {
            var match = $("#userInput").val().match(/-p([\s]+)(.+)/i);
            if (e.keyCode === 8) {
                var deleted = $('#hiddenPassword').val().substring(0, $('#hiddenPassword').val().length - 1);
                $('#hiddenPassword').val(deleted);
            } else {
                if (match !== null && match[2] && String.fromCharCode(e.keyCode).match(/[a-zA-Z0-9]/)) {
                    //Alphanumeric
                    $('#hiddenPassword').val($('#hiddenPassword').val() + $("#userInput").val().substring($("#userInput").val().length - 1));
                    $("#userInput").val(($("#userInput").val().replace(/-p (.+)/, "-p " + "*".repeat(match[2].length))));
                }
            }
            if (match !== null && match[2]) {
                console.log("Password is: " + $('#hiddenPassword').val());
            }
        });
    });
</script>

Answer 5

I have a similar kind of implementation but there is a problem. When entering too fast, I getting * in the value. Can someone help me here?