web-dev-qa-db-ja.com

input type = "text"をinputtype = "password" onfocus（）に変更します

これまでのところ、最初の部分を完了しました。次のJavaScriptを使用して、入力タイプをテキストからパスワードに正常に変更しました。

_function replaceT(obj) {
        var newO = document.createElement('input');
        newO.setAttribute('type', 'password');
        newO.setAttribute('class', 'textbox');
        newO.setAttribute('name', obj.getAttribute('name'));
        obj.parentNode.replaceChild(newO, obj);
        newO.focus();
    } 
_

およびASPコード：

_<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..." TabIndex="2" onfocus="replaceT(this)"></asp:TextBox>
_

私が欲しいのは2番目の部分です。 "Password ..."値をonblurで返す方法。

つまり、Facebookのようなパスワードテキストボックスを実装したいと思います。 placeholder IEで機能する属性。

focus()の前にどうなるか：

enter image description here

その後、フォーカス後：

enter image description here

次に、このonblur()に戻ります。

ありがとうございました。

P.S.

JQuery（pure javascript）なしでこれを実装したいのですが、IE 7+で作業しています。

javascripthtmlasp.netformstextbox
7
Christian Mark

コンポーネントを置き換える必要はありません。以下のコードのように、typeのthisをpasswordに設定するだけです。

<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..." TabIndex="2" onfocus="this.type='password'">

Jsfiddleの動作例を次に示します。 http://jsfiddle.net/mZyTG/

更新

このコードはテストしていませんが、1つのonblurイベントリスナーをnewOに追加し、呼び出されると、入力を古いものに置き換えます。

function replaceT(obj) {
        var newO = document.createElement('input');
        newO.setAttribute('type', 'password');
        newO.setAttribute('class', 'textbox');
        newO.setAttribute('name', obj.getAttribute('name'));
        newO.addEventListener("onblur", function(){newO.parentNode.replaceChild(obj, newO)}, false);
        obj.parentNode.replaceChild(newO, obj);
        newO.focus();
    }
4
fmodos
<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..."placeholder="Enter your password" >

このコードをaspセクションに配置するだけです。JavaScriptは必要ありません。これが役立つことを願っています。

編集2：これが役立つことを願って、すなわち10でテスト

 <html>
 <script>
 function a()
{
document.getElementById("p1").value="";
document.getElementById("p1").type="password";

}

function b()
{
if(document.getElementById("p1").value=="")
{
document.getElementById("p1").type="text";
document.getElementById("p1").value="Password";
}
else
{   
document.getElementById("p1").type="password";

}


}
</script>
<body>
Password:<input type="text" value="Password" onclick="a();" id="p1"         

onblur="b();">
<body>
</html>
2
Ritz

この小さなプラグインを試してください

 <script>
   $(".contentplaceholder").placeholderContent();
 </script>

フィドルを確認してください

http://jsfiddle.net/Shinov/VdtBs/

新しいフィドルで純粋なJavaScriptプレースホルダーを確認してください

http://jsfiddle.net/Shinov/VdtBs/2/

1
Shinov T

Javascriptとcssをマークアップから分離するためのアドバイスから始めます。それは古い学校と見なされ、今日では悪い習慣であると考えられています。 IEのsetAttributeとgetAttributeにはいくつかの既知の問題があり、おそらくあなたにとって重要なので、他のものを使用しようとします。グーグルしてみてください： setAttributeとgetAttributeの問題ie

私はjsfiddleで何かを作りました、そうでなければ、それがあなたのために働くことを願っています-私に知らせてください。コードスニペット： 簡単な例 。

[〜＃〜] html [〜＃〜]

<input class='placeholder' value="Type here..."/>

[〜＃〜] css [〜＃〜]

.placeholder {
    color: #aaa; 
}
.text {
    color: #000;
}

[〜＃〜] js [〜＃〜]

var input = document.getElementsByTagName('input')[0];

if(input.addEventListener) {
    input.addEventListener('blur', function(){
        this.type = 'text' 
        this.value = 'Type here...';
        this.className = 'placeholder';
    }, false);
    input.addEventListener('focus', function(){
        this.type = 'password'
        this.value = '';
        this.className = 'text';
    }, false);
} else if(input.attachEvent) {
    input.attachEvent('onblur', function(){
        this.type = 'text' 
        this.value = 'Type here...';
        this.className = 'placeholder';
    });
    input.attachEvent('onfocus', function(){
        this.type = 'password'
        this.value = '';
        this.className = 'text';
    });
}

Idで要素にアクセスすると、より具体的かつ高速になりますが、タグ名で要素にアクセスすると、ループを使用してすべての入力要素に同じコードを適用できます。

私はLinuxを使用していて、IEでテストする時間がありませんが、動作するはずです。

私の例は特定のタスクにのみ適用されます。より広い領域のタスクに適用できるように、そのタスクから関数を作成することをお勧めします。

編集：新しいブラウザの場合は プレースホルダー属性 を使用します。これが ブラウザサポート

0
orustammanapov