2016-08-01 78 views
-1

如何取消选中复选框将textbox textmode更改为密码,然后textbox textmode =文本如果未选中,然后设置textmode =密码 使用javascript?如何使用复选框更改文本框文本模式

我想这个代码

function test() { 
    if ($('#TBPASS12').get(0).type = 'text') { 
     document.getElementById('<%= TBPASS12.ClientID %>').type = 'password'; 
    } 
    else if ($('#TBPASS12').get(0).type = 'password') { 
     document.getElementById('<%= TBPASS12.ClientID %>').type = 'text'; 
    }   
} 

+2

共享分析/浏览器呈现的HTML ... – Rayon

+1

文本模式只能在javascript中阅读。您无法更改类型。 –

+0

假设这是为了像“显示密码”功能,我建议两个不同的领域,并显示/隐藏基于复选框的状态。您需要找出将值绑定到两个字段的最佳方式,或者在另一个字段更改时更新一个。应该实际发布到服务器的字段应该是密码字段,以确保有效负载在语义上是正确的。 – trnelson

回答

0

文本模式是在JavaScript read only。所以你不能改变js的类型。 你可以做的只有一件事是,动态和setattribute创建文本框给他们,并与前

更换试试这个样子,

$(function(){ 
 
    var inp = document.getElementById("in"); 
 
    if(inp.type == 'text'){ 
 
    var newIn = document.createElement('input'); 
 
    newIn.setAttribute('type', 'password'); 
 
    newIn.setAttribute('id', inp.getAttribute('id')); 
 
    newIn.setAttribute('name', inp.getAttribute('name')); 
 
    inp.parentNode.replaceChild(newIn, inp); 
 
    newIn.focus(); 
 
    } 
 
});
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    <link href="style.css" rel="stylesheet" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js" data-semver="3.0.0" data-require="jquery"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <input id="in" type="text"/> 
 
    </body> 
 

 
</html>

0

你想透露一个密码?正如其他人所说,textmode是只读的,但你可以做一些事情。

(编辑:曾经有在片段一个小错误,但我固定它反映的bug少小提琴的片段成功地工作)

希望这有助于

var x= document.createElement("INPUT"); 
 
var y= document.createElement("INPUT"); 
 
x.setAttribute("type", "password"); 
 
x.id = "<%= TBPASS12.ClientID %>"; 
 
x.className = "password1"; 
 
x.value =""; 
 
document.body.appendChild(x); 
 

 
var passwords = document.getElementsByClassName("password1"); 
 
for (var i = 0; i < passwords.length; i++) { 
 
    passwords[i].addEventListener('keydown', checkEnter, false); 
 
} 
 

 
function checkEnter (e){ 
 
    if (e.keyCode == 13) { 
 
    if ((".password1").value !== null) { 
 
     y.setAttribute("type", "text"); 
 
     y.id = "value"; 
 
     y.value = x.value; 
 
     y.style.display="block"; 
 
     document.body.appendChild(y); 
 
     
 
    } 
 
    } 
 
}
input[type="password"] { 
 
    background: lightblue; 
 
    width: 100px; 
 
    height: 20px; 
 
    display: block; 
 
} 
 

 
input[type="text"] { 
 
    display:none; 
 
    background: lightgreen; 
 
    width: 100px; 
 
    height: 20px; 
 
    display: block; 
 
}
<body> 
 
</body>

+0

小提琴在https://jsfiddle.net/ RachGal/6zom020p / –

相关问题