Fake input text JavaScript

Question

I have 2 HTML input fields:

<input type="password" maxlength="4" id="fakepassword" />
<input type="hidden" maxlength="8" id="password" />

How do I insert a value into the password field, when typed and when the focus is on fakepassword?
I am trying to get the value from fakepassword with the OnkeyUp event, but I am stuck at maxlength.
Is there a way to get the value from keyboard press?

My real problem is, that I have a login form and I want my password field showing only 4 characters, no matter how many character I put into it.

Please help.

Please provide your code. Both HTML and javascript. You could make a http://jsfiddle.net if you want a quicker better explanation. — DutGRIFF, Sep 15 '13 at 19:48

score 0 · Accepted Answer · answered Sep 15 '13 at 19:58

0

You can catch the event in jquery:

$('#fakepassword').on('keyup', function(e){
    console.log(String.fromCharCode(e.keyCode)); //this logs the letter to the console.
});

answered Sep 15 '13 at 19:58

Razz

3,995
1
18
15

what is console.log? and how to get string with this console.log? – Arrmy Yuwandono Sep 15 '13 at 21:33
Console.log will send a message to the browsers log, which is very handy when you are working with javascript. I really recommend you using it, here's how: http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it – Razz Sep 16 '13 at 08:11

score 0 · Answer 2 · answered Sep 15 '13 at 20:00

Do you want this only for the UI? So the user won't see the actual length of their password, as a security precaution? You could place an image over top of the password field, and pass the click through it to the actual password field.

<div id="pass_div">
    <input type="password" name="pass" id="pass" />
    <img id="pass_img" src="" />
</div>

The #pass_img will cover the actual password input, kind of "hiding" it. The image I found is only for demonstration purposes. Please find or make a better one.

http://jsfiddle.net/4ssWe/

<div id="pass_div">
    <input type="password" name="pass" id="pass" />
    <img id="pass_img" src="http://i.imgur.com/1JthtLK.gif" />
</div>

#pass_div {
    position: relative;
    display: inline-block;
}
#pass_img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    width: 100%;
    pointer-events: none;
}

no sir, i want this to work with function because this is a task — Arrmy Yuwandono, Sep 15 '13 at 21:32

Fake input text JavaScript

2 Answers2