Create an 'account password' input field

L

laredotornado

Hi,

This might be a pipe dream, but I want to create a password field that
reads, "account password", but when you click on the box and start
typing, you see password characters instead of actual leters and
numbers. So far I have

<input size="18" type="text" name="password" id="password"
value="account password" onclick="if(this.value=='account password')
{this.value=''; this.type='password'};"/>

but this doesn't work (at least on PC Firefox), as some of you may
expect. Any suggestions on JS I could use that may solve the
problem? The web page where this little experiment is taking place is
http://easyrx.us/.

Thanks, - Dave
 
D

Doug Gunnoe

Hi,

This might be a pipe dream, but I want to create a password field that
reads, "account password", but when you click on the box and start
typing, you see password characters instead of actual leters and
numbers.  So far I have

<input size="18" type="text" name="password" id="password"
value="account password" onclick="if(this.value=='account password')
{this.value=''; this.type='password'};"/>

but this doesn't work (at least on PC Firefox), as some of you may
expect.  Any suggestions on JS I could use that may solve the
problem?  The web page where this little experiment is taking place ishttp://easyrx.us/.

Thanks, - Dave

Dave,

try <input type="password"

http://www.ahfb2000.com/formsinputtypepassword.php
 
J

Joost Diepenmaat

laredotornado said:
Hi,

This might be a pipe dream, but I want to create a password field that
reads, "account password", but when you click on the box and start
typing, you see password characters instead of actual leters and
numbers.

<input type="password">
 
E

Evertjan.

Joost Diepenmaat wrote on 27 feb 2008 in comp.lang.javascript:
<input type="password">

I think this is sort of what the OP wants,
the yellow colour is only for testing,
in teality you would not want to show your hand:

[IE7 tested]

================================================
<input type=password value=''
onblur='ob(this)'
style='display:none;'
id=p>
<input type=text value='account password'
onfocus='of(this)'
style='display:block;background:yellow;'
id=t>

<script type='text/javascript'>

function of(x){
x.style.display='none';
document.getElementById('p').style.display='block';
document.getElementById('p').focus();
};

function ob(x){
x.style.display='none';
document.getElementById('t').style.display='block';
document.getElementById('p').focus();
};

</script>
================================================
 
E

Evertjan.

Evertjan. wrote on 27 feb 2008 in comp.lang.javascript:
I think this is sort of what the OP wants,
the yellow colour is only for testing,
in teality you would not want to show your hand:

[IE7 tested]

Small improvemant:

================================
<input type=password value=''
onblur='ob(this)'
style='display:none;background:#aff;'
id=p>
<input type=text value='password please'
onfocus='of(this)'
style='display:block;background:yellow;'
id=t>

<script type='text/javascript'>

function of(x){
x.style.display='none';
document.getElementById('p').style.display='block';
document.getElementById('p').focus();
};

function ob(x){
x.style.display='none';
document.getElementById('t').style.display='block';
document.getElementById('t').value=
(x.value) ?'thanks' :'password please';
};

</script>
================================
 
L

laredotornado

Joost Diepenmaat wrote on 27 feb 2008 in comp.lang.javascript:
<input type="password">

I think this is sort of what the OP wants,
the yellow colour is only for testing,
in teality you would not want to show your hand:

[IE7 tested]

================================================
<input type=password value=''
onblur='ob(this)'
style='display:none;'
id=p>
<input type=text value='account password'
onfocus='of(this)'
style='display:block;background:yellow;'
id=t>

<script type='text/javascript'>

function of(x){
   x.style.display='none';
   document.getElementById('p').style.display='block';
   document.getElementById('p').focus();

};

function ob(x){
   x.style.display='none';
   document.getElementById('t').style.display='block';
   document.getElementById('p').focus();

};

</script>
================================================

Hi Evertjan, This is exactly what I was looking for. Thanks, - Dave
 
N

Nick Fletcher

Evertjan. wrote on 27 feb 2008 in comp.lang.javascript:
I think this is sort of what the OP wants,
the yellow colour is only for testing,
in teality you would not want to show your hand:
[IE7 tested]

Small improvemant:

<snip>

If someone has JavaScript disabled, their password will show in plain
text. The user probably won't like that much.

It's also not a very accessible approach. If someone accesses your
website with a screen reader it's going to read both boxes and confuse
the user (yes I know some screen readers do look for display:none but
that may not always be the case).

You may be better off doing something like this:

<style type="text/css">
div.hintWrap {
position: relative;
}
div.hintWrap div.hint {
position: absolute;
top: 5px;
left: 5px;
color: #999999;
z-index: 1000;
}
</style>
<script type="text/javascript">
// Show the hint when the page loads
window.onload = function() {
var hint = document.createElement("div");
hint.className = "hint";
hint.appendChild(document.createTextNode("Your Password"));

var passwordBox = document.getElementById("password_box");
var parent = passwordBox.parentNode();
parent.appendChild(hint);

// Hide the hint when the box is in focus
passwordBox.onfocus = function() {
parent.removeChild(hint);
}
// Show the hint when the box loses focus and is empty
passwordBox.onblur = function() {
if (!passwordBox.value) {
parent.appendChild(hint);
}
}
}
</script>

The html will look something like this:

<div class="hintWrap">
<input type="password" value="" />
</div>

This will hover the hint above the text box and hide it when it's in
focus. If the user has JavaScript disabled, it will just be a regular
password box. If a visually impaired user tries to use your site via a
screen reader, the screen reader will see a regular password box.

JavaScript should only ever enhance a page. Not provide make or break
functionality.
 
N

Nick Fletcher

The html will look something like this:

<div class="hintWrap">
<input type="password" value="" />
</div>

Oops. Forgot the ID:

<input id="password_box" type="password" value="" />
 
E

Evertjan.

Nick Fletcher wrote on 28 feb 2008 in comp.lang.javascript:
JavaScript should only ever enhance a page. Not provide make or break
functionality.

I disagree.

The above is a choice you make, and a good one, but it is a choice.

You could have tested for JS compatibility and have the js incompatible
user diverted to a different set of pages.

Or you could not care a damn for the users without javascript.

Perhaps not nice, but "only ever", no.

WARNING:
The caring for and protecting of the sensibilities of js-off users also
will increase their numbers, do we wnat that?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top