2016-08-01 5 views
-1

チェックボックスをオフにした場合、テキストボックスのテキストモードをパスワードに変更するには、テキストボックスのテキストモードをオフにしてtextmode = passwordに設定します。 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

これは「パスワードを表示」機能のようなものだと仮定して、2つの異なるフィールドを推奨し、チェックボックスの状態に基づいて表示/非表示を選択します。両方のフィールドに値をバインドするか、もう一方が変更されたときに値を更新する最良の方法を理解する必要があります。ペイロードが意味的に適切であることを保証するために、サーバーに実際にPOSTするフィールドはパスワードフィールドにする必要があります。 – 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

パスワードを明らかにしたいですか?他の人が言っているように、テキストモードは読み込み専用ですが、少しは何かできます。

(EDITは:!バグレスフィドルをミラーリングするスニペットでマイナーなバグがありましたが、私はそれを修正スニペットが正常に動作します)

ホープこれは

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

fiddle https://jsfiddle.net/ RachGal/6zom020p / –

関連する問題