ok I have default text in an input field as "password" and when a key is pressed I want it to change to the input type "password". But when I attempt this the input doesn't register my first key press but it registers all key presses after the input type switch.
function inputField(focus, inputValue, inputID){
// change inputID variable into pointer to the actual ID
var iD = document.getElementById(inputID);
// check if input has focus and handle default value changes, password field type changes, and font color changes.
if (focus == "on"){
if(iD.value == inputValue){
iD.setSelectionRange(0, 0);
iD.style.color = "#b2b2b2";
}
iD.onkeypress = function(){
if(iD.value == "password" || iD.value == "retype password"){
iD.type = "password";
}
if (iD.value != "" && iD.value == inputValue){
iD.value = "";
iD.style.color = "#000000";
}
}
}else if(focus == "off"){
if (iD.value == ""){
if(iD.type == "password"){
iD.type = "text";
}
iD.style.color = "#787878";
iD.value = inputValue;
}else if(iD.value == inputValue){
iD.style.color = "#787878"
}
}
}
<input
id = "registerPassword"
class = "loginSectionInput"
type = "text"
name = "rPassword"
value = "password"
onfocus = "inputField('on', 'password', this.id)"
onblur = "inputField('off', 'password', this.id)"
onchange = "formCheck('registerPassword')"
/>
HTML5 solves this problem for us with the placeholder attribute. No need to manage the events again...Please check some like following
<input type=password name="pwd" placeholder="Password">
You can do it in different ways, some of them are listed here! hope i have help you
Let say you have field like-
<input type="text" id="mypswfield" name="mypswfield" />
Way 1:
On onClick even, you can replace it by using Jquery,
$('#mypswfield').replaceWith('<input type="password" id="mypswfield" />')
Way 2:
$("[name=fieldname]").attr("type", "password");
(Note: This is jquery function may issue in old IE so careful)
Way 3: Create function
function txtField()
{
if(document.getElementById('mypswfield').value=='')
{
document.getElementById('mypswfield').type='text';
document.getElementById('mypswfield').value='Password';
}
}
function txtPawd()
{
document.getElementById('mypswfield').type='password';
document.getElementById('mypswfield').value='';
}
HTML
<input id="mypswfield" onclick="txtField();" onblur="txtPawd();" name="mypswfield" type="text" value="Password">
show you an example:
<html><head><script>function swithch(){
alert("myText is ");
var myText=document.getElementById("myId");
alert("myText is "+myText);
alert("myText is type "+myText.type);
alert("myText is value "+myText.value);
myText.type='text';
myText.value='56789';
}</script></head><body>
TT <input type="password" name="myText" id="myId" value="123456"/> <input type="button" name="switch" value="swithch" onclick="swithch()">
this code have been tested at google chrome.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.