Menu
I want to have a password field which says "Password" in it before a user enters their password (so they know what the field is)
I'd rather just use Javascript, importing jQuery for this alone seems wasteful, but I have no idea how to. The images explain quite clearly:
What it looks like:
What I want it to look like:
It's only a very simple website and the most basic of logins (has no validation etc)
Any ideas?
<input id="username" name="username" class="input_text" type="text" value="Username" />
<input id="password" name="password" class="input_text" type="password" value="Password" />
840
The default type of <input> type attribute is text.
First, create an <input> element with the type of password and an icon that allows users to click it to toggle the visibility of the password. Second, bind an event handler to the click event of the icon. If the icon is clicked, toggle the type attribute of the password field between text and password .
Definition and Usage The value attribute specifies the value of an <input> element. The value attribute is used differently for different input types: For "button", "reset", and "submit" - it defines the text on the button. For "text", "password", and "hidden" - it defines the initial (default) value of the input field.
If you're using HTML5 then you should use the placeholder attribute.
<input id="username" name="username" class="input_text" type="text" placeholder="Username" />
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />
If you're using HTML4 you can create a fake password field.
<script type="text/javascript">
function pwdFocus() {
$('#fakepassword').hide();
$('#password').show();
$('#password').focus();
}
function pwdBlur() {
if ($('#password').attr('value') == '') {
$('#password').hide();
$('#fakepassword').show();
}
}
</script>
<input id="username" name="username" class="input_text" type="text" v="Username" />
<input id="fakepassword" name="fakepassword" type="text" value="Password" style="color:#ccc" onfocus="pwdFocus()" />
<input id="password" name="password" class="input_text" type="password" style="display:none" onblur="pwdBlur()" />
Change your password input to be a simple input type text. Then, with JavaScript (or JQuery) on focus event, change it to be a input type password.
Here is a little untested sample with plain JavaScript (no JQUERY):
<html>
<head>
<script type="text/javascript">
function makeItPassword()
{
document.getElementById("passcontainer")
.innerHTML = "<input id=\"password\" name=\"password\" type=\"password\"/>";
document.getElementById("password").focus();
}
</script>
</head>
<body>
<form>
<span id="passcontainer">
<input onfocus="return makeItPassword()" name="password" type="text" value="Type Password" />
</span>
</form>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
