JavaScript Tutorial/Form/Password
Содержание
Compare value in the password fields
<head>
<title>Password</title>
<script>
function checkPass(){
var guess = document.myForm.pwdGuess.value;
var secret = document.myForm.hdnSecret.value;
if (guess == secret){
document.myForm.txtOutput.value = "You may proceed.";
} else {
document.myForm.txtOutput.value = "That is incorrect.";
}
}
</script>
</head>
<body>
<center>
<h1>Password<hr></h1>
<form name = "myForm">
<table>
<tr>
<td>Please enter password</td>
<td><input type = "password"
name = "pwdGuess">
</tr>
<tr>
<td colspan = 2><center>
<input type = "button"
value = "click me"
onClick = "checkPass()"></center>
</td>
</tr>
<tr>
<td colspan = 2>
<center>
<textArea name = "txtOutput"
rows = 1
cols = 35>
</textarea>
</center>
</td>
</tr>
</table>
<input type = "hidden"
name = "hdnSecret"
value = "JavaScript">
</form>
<hr>
</center>
</body>
Password
The Password object refers to the HTML element created with the <input> tag setting the type to specify password.
Instead of displaying the input in cleartext, input is displayed using the * symbol.
Property/Method Description blur() Removes focus from the password box defaultValue Refers to the VALUE attribute of the HTML password box focus() Sets focus to the password box form Refers to the form that contains the password box handleEvent() Invokes the event handler name Refers to the NAME attribute of the HTML password box onBlur Event handler used when the focus is removed from the password box onFocus Event handler used when the focus is put on the password box select() Selects the text entered in the password box type Refers to the TYPE attribute of the HTML password box value Refers to the current contents of the password box
<html>
<head>
<title> Creating a password object</title>
</head>
<body>
<form name="form1">
<input type="PASSWORD" Name="pass" size=10>
<br>
<input type="BUTTON" value="Show Password" onClick=alert(document.form1.pass.value)>
</form>
</body>
</html>
Password.blur()
The blur method removes the focus from the password box.
<html>
<head>
<title> Example of the blur method of the password object</title>
</head>
<body>
<script language="JavaScript">
<!--
function shift(){
document.form1.pass.blur();
document.form1.txt.value="Get Focus";
}
-->
</script>
<form name="form1">
<input type="PASSWORD" Name="pass" size=10>
<br>
<input type="Text" name="txt" size=10>
<br>
<input type="BUTTON" value="Show Password" onClick=shift()>
</form>
</body>
</html>
Password.defaultValue
The defaultValue gets the HTML VALUE attribute of the password box.
<html>
<head>
<title> Example of the password defaultValue property</title>
</head>
<body>
<form name="form1">
<input type="PASSWORD" Name="pass" size=10 value="pass123">
<br>
<input type="BUTTON" value="Show Password" onClick=alert(document.form1.pass.defaultValue)>
</form>
</body>
</html>
Password.focus()
The focus() method sets the focus to the password box.
<html>
<head>
<title> Example of the password focus method</title>
</head>
<body>
<form name="form1">
<input type="PASSWORD" Name="pass" size=10>
<br>
<input type="BUTTON" value="Show Password" onClick=document.form1.pass.focus()>
</form>
</body>
</html>
Password.form
The form property accesses the Form object in which the password box resides.
<html>
<head>
<title> Example of the password form property</title>
</head>
<body>
<form name="form1">
<input type="PASSWORD" Name="pass" size=10>
<br>
<input type="BUTTON" value="Show Formname" onClick=alert(document.form1.pass.form.name)>
</form>
</body>
</html>
Password.handleEvent()
Syntax
password.handleEvent(event)
Password.name
The name property gets the HTML NAME attribute of the password box.
<html>
<head>
<title> Example of the password name property</title>
</head>
<body>
<form name="form1">
<input type="PASSWORD" Name="pass" size=10>
<br>
<input type="BUTTON" value="Show Formname" onClick=alert(document.form1.pass.name)>
</form>
</body>
</html>
Password.onBlur
The onBlur event handler handles the event that occurs when the focus is removed from the password box.
<html>
<head>
<title> Example of the password onBlur event handler</title>
</head>
<body>
<script language="JavaScript">
<!--
function setTxt(){
alert("setup");
}
-->
</script>
<form name="form1">
<input type="PASSWORD" Name="pass" size=10 onBlur=setTxt()>
</form>
</body>
</html>
Password.onFocus
The onFocus event handler handles the Focus event for the password box.
<html>
<head>
<title> Example of the password onFocus event handler</title>
</head>
<body>
<script language="JavaScript">
<!--
function set(){
alert("123");
}
-->
</script>
<form name="form1">
<input type="PASSWORD" Name="pass" size=10 onFocus=set()>
<br>
<input type="BUTTON" value="Show Formname" >
</form>
</body>
</html>
Password.select()
The select() method selects the value entered into the password box.
The selected value is highlighted.
<html>
<head>
<title> Example of the password select method</title>
</head>
<body>
<form name="form1">
<input type="PASSWORD" Name="pass" size=10>
<br>
<input type="BUTTON" value="Select Password" ?onClick=document.form1.pass.select()>
</form>
</body>
</html>
Password.type
The type property gets the HTML TYPE attribute associated with the password box.
For the Password object, this value is always password.
<html>
<head>
<title> Example of the password type property</title>
</head>
<body>
<form name="form1">
<input type="PASSWORD" Name="pass" size=10>
<br>
<input type="BUTTON" value="Get Type" onClick=alert(document.form1.pass.type)>
</form>
</body>
</html>
Password.value
The value property gets the value entered in the password box.
<html>
<head>
<title> Example of the password value property</title>
</head>
<body>
<form name="form1">
<input type="PASSWORD" Name="pass" size=10>
<br>
<input type="BUTTON" value="Get Value" onClick=alert(document.form1.pass.value)>
</form>
</body>
</html>