...

View Full Version : Dynamic Input Boxes



Troy297
07-15-2007, 08:09 PM
Hey Everyone!

I am working on an opensource project for my website and am trying to make the input boxes for the login dynamic. Like what I have right now is it shows inside the input box "Enter Your Password" and the textbox is set to type="text". Now the problem is how can I have it so that when they enter their password it appears as *** or is hidden or something but the "Enter Your Password" still works and shows up? The code I'm using right now is below:

Sorry... further explanation, right now heres how it works:
1. Input box shows "Enter Your Password"
2. When you click the box it goes blank for you to type in your password
3. If you don't type anything and click off "Enter Your Password" re-appears

HTML

<input type="text" class="login" name="passwrd" onfocus="checkClearValue(this, 'Enter Your Password')" onblur="checkFillValue(this, 'Enter Your Password')" value="Enter Your Password" maxlength="20" />

CSS


.login {
font-family: Tahoma;
font-size: 14px;
color: #646464;
text-align: right;
border: 1px solid #646464;
height: 25px;
width: 200px;
margin-bottom: 10px;
padding: 2px;
}

JAVASCRIPT

function checkClearValue(field, label){
if(field.value == label)
field.value = "";
}
function checkFillValue(field, label){
if(field.value.length == 0)
field.value = label;
}

Any help is greatly appreciated and +Rep will be given! Thanks :thumbsup:

Philip M
07-16-2007, 10:05 AM
This should give you a start.

<form name = "myform">

<input type="text" class="login" name="passwrd" onfocus="checkClearValue(this, 'Enter Your Password')" onkeyup = "obscurePW()" onblur="checkFillValue(this, 'Enter Your Password')" value="Enter Your Password" maxlength="20" />

</form>

<script type = "text/javascript">

var pwdval = "";
var hiddenpwd = "";

function checkClearValue(field, label){
if(field.value == label) {
field.value = "";
pwdval = "";
hiddenpwd = "";
}
else { // if password once entered cannot be modified/lengthened, only re-entered
field.value = "";
hiddenpwd = "";
}
}

function checkFillValue(field, label){
if(field.value.length == 0) {
field.value = label;
}
else {alert(hiddenpwd)} // when full password entered - to be placed in a hidden field
}

function obscurePW() {
pwdval = document.myform.passwrd.value;
len = pwdval.length;
lastchar = pwdval.substring(len-1, len);
hiddenpwd = hiddenpwd + lastchar;
hiddenpwd = hiddenpwd.replace(/\*/g, ""); // eliminate backspaces or * characters
pwdval = pwdval.replace(/./gi, "*")
document.myform.passwrd.value = pwdval;
}

</script>

Troy297
07-18-2007, 06:58 PM
Hey,

First of all thanks very much for the script but it doesn't quite work...

When I type in the password it isn't hidden and then when I click off the password box I get a blank javascript alert...

Any help? +Rep to Phil

Philip M
07-18-2007, 10:20 PM
Strange, it works fine for me in IE.

Sure you have copied it all correctly? Is the form name correct?

Try adding an alert:-
function obscurePW() {
pwdval = document.myform.passwrd.value;
alert (pwdval);

glenngv
07-18-2007, 11:08 PM
Script:

function showHideRealPwd(fakePwd, realPwd, isShowRealPwd){
if (isShowRealPwd) {
fakePwd.className = fakePwd.className.replace(/showpwd/, "hidepwd");
realPwd.className = realPwd.className.replace(/hidepwd/, "showpwd");
realPwd.focus();
}
else if (realPwd.value==""){
fakePwd.className = fakePwd.className.replace(/hidepwd/, "showpwd");
realPwd.className = realPwd.className.replace(/showpwd/, "hidepwd");
}
}

function init(){
var f = document.forms[0];
f.fakePwd.className = f.fakePwd.className.replace(/hidepwd/, "showpwd");
f.passwrd.className = f.passwrd.className.replace(/showpwd/, "hidepwd");
}
window.onload = init;
CSS:

.hidepwd {
display:none;
}
.showpwd {
display:inline;
}
HTML:

<form>
<input type="text" name="fakePwd" class="hidepwd" onfocus="showHideRealPwd(this, this.form.passwrd, true);" value="Enter Your Password" />
<input type="password" name="passwrd" class="showpwd" onblur="showHideRealPwd(this.form.fakePwd, this, false);" />
</form>
Fake password field is hidden and real password field is displayed by default so that if js is disabled, the password field is still usable.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum