Replace part of the text in a text box when typing into it
The format of the text in the text box is as follows:
login -u username -p password
When entering this text, I want to replace 'password' with the number '*' equal to its length. So if I type:
' login -u abc@abc.com -p abc
' in the text box, it should look like this:
login -u abc@abc.com -p ***
And also I need to store the actual password that is being replaced.
Is there a way? Thank you in advance
source to share
You have to parse the input value with a regular expression, i.e.
<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/
source to share
You can use multiple text boxes and still make them look like one command prompt. By using CSS, you remove the left, right borders and join them close enough. In the keypress event of each text box, check if the user is gaining space and switch focus to the next text box. This solution works if you have a fixed input format.
source to share
How you need to look for your claim needs to be changed. Why do you need to get data from a user with one single input?
You need to collect username and password in different ways, and then you can combine them in a submit form.
$("#submit").click(function(){
$output = "login -u " + $("#username").val() + " -p " + $("#password").val();
alert($output);
return false;
});
source to share
Do not do this. You can see what I have tried at the bottom of my answer.
I played around with this problem a bit, but when I ran into other problems.
There are 2 ways to do this. 1st, when the user enters a character, you need to use a function keyup
.
So, you can write a regex that catches -p andsomecharactersherewhileitsnotspace
.
So the first way is to catch the last character of the user's password and pass it to the hidden field. Me and Apul Gupta
tried it.
For some reason, both of our codes mess up the password, because for some reason, which I don't know, there will be characters *
if you type fast. I tried to replace these characters *
, but in this case some characters are lost from the password.
Another way is to get a character from the keyup event. This is bad because it String.fromCharCode
always returns uppercase characters, since keyup doesn't know if SHIFT
or is CAPS LOCK
. Maybe now you think you can handle it, but you cannot. SHIFT is simple, but you don't know if CAPS LOCK
befor was included or not.
There might be a solution for this if you only allow users to have lowercase or only uppercase passwords, but this is bad because it is not valid.
So, think a little more. Let's say we can somehow use one of the solutions. Then all this turns into a very complicated thing, which is too expensive, I think. Because, you have to handle what happens if the user is just a SHIFT, LEFT ARROW, DELETE
password. You need to check what is selected with this keyboard shortcut, where was the cursor, etc.
I suggest you forget about it or try to find another way to do it.
Kiran Vartis' answer is the best option I think.
What I have 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>
source to share