Fatal编程技术网
  • javascript/
  • Javascript 如何在不延迟按键的情况下将输入类型更改为密码

Javascript 如何在不延迟按键的情况下将输入类型更改为密码

javascript html

Javascript 如何在不延迟按键的情况下将输入类型更改为密码,javascript,html,Javascript,Html,好的，我在输入字段中有默认文本“password”，当按下一个键时，我希望它更改为输入类型“password”。但当我尝试此操作时，输入不会注册我的第一次按键，但会注册输入类型开关后的所有按键 function inputField(focus, inputValue, inputID){ // change inputID variable into pointer to the actual ID var iD = document.getElementById(inputID); //

好的，我在输入字段中有默认文本“password”，当按下一个键时，我希望它更改为输入类型“password”。但当我尝试此操作时，输入不会注册我的第一次按键，但会注册输入类型开关后的所有按键

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')"
 />

函数输入字段（焦点、输入值、输入ID）{
//将inputID变量更改为指向实际ID的指针
var iD=document.getElementById（inputID）；
//检查输入是否具有焦点，并处理默认值更改、密码字段类型更改和字体颜色更改。
如果（焦点=“打开”）{
if（iD.value==inputValue）{
iD.setSelectionRange（0,0）；
iD.style.color=“#b2b2b2b2”；
}
iD.onkeypress=函数（）{
如果（iD.value==“密码”| | iD.value==“重新键入密码”）{
iD.type=“密码”；
}
if（iD.value！=''&&iD.value==inputValue）{
iD.value=“”；
iD.style.color=“#000000”；
}
}
}否则如果（焦点=“关闭”）{
如果（iD.value==“”）{
如果（iD.type==“密码”）{
iD.type=“text”；
}
iD.style.color=“#787878”；
iD.value=输入值；
}else if（iD.value==inputValue）{
iD.style.color=“#787878”
}
}
}
HTML5通过占位符属性为我们解决了这个问题。无需再次管理事件…请检查以下内容

<input type=password name="pwd" placeholder="Password">
你可以用不同的方法来做，这里列出了其中的一些方法！希望我能帮助你

假设你有一个类似于场的-

<input type="text" id="mypswfield" name="mypswfield" />
（注意：这是jquery函数在旧IE中可能会出现的问题，请小心）

方式3: 创建函数

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
向您展示一个示例：

<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()">

函数开关（）{
警报（“myText为”）；
var myText=document.getElementById（“myId”）；
警报（“myText为”+myText）；
警报（“myText为类型”+myText.type）；
警报（“myText是值”+myText.value）；
myText.type='text'；
myText.value='56789'；
}
TT

这段代码已经在google chrome上测试过。

你的按键事件在哪里？iD是什么元素？为了更好地理解HTML5功能是如何受支持的，请做一个简单的说明？编辑：我刚刚尝试使用占位符，但它仍然显示在密码“点”中。再次编辑：nevermind我通过删除value属性修复了它 
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='';

}

<input id="mypswfield" onclick="txtField();" onblur="txtPawd();" name="mypswfield" type="text" value="Password">

<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()">