勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ

バニラJavaScriptでinputタグのtypeをtext⇔passwordに変更する方法

   2024/06/19  JavaScript

チェックボックスの状態によってinputタグのtypeをtext⇔passwordへ切り替えたかった。jQueryのattrでいけると思ったら無理だったのでメモ。

 

ソース

パスワード:<input type="text" id="pass"><br />
<input type="checkbox" value="1" onChange="document.getElementById('pass').type = (this.checked) ? 'text' : 'password';">パスワードを表示

 

その他

checkboxを変更(onChange)した時に、checkboxの値が1の(チェックされている)場合にid=passのtypeをtextへ変更。

 

jQueryだとできない?(参考サイト)

http://myjquery.blog.fc2.com/blog-entry-14.html#modified-11

1.9からはブラウザによって出来るかもとのこと。

JSだったらwin7のIE9/FireFox25.0.1/Chrome 31.0.1650.63/

iphone5で動作確認できた。

 - JavaScript

  関連記事

jQueryにて複数のajax処理のレスポンスをまとめて表示する方法
jQueryにて複数のajax処理のレスポンスをまとめて表示する方法

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...

指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法
指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法

指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...

簡単にスケルトンローディングを実装できる「phantom-ui」ライブラリの使用方法
簡単にスケルトンローディングを実装できる「phantom-ui」ライブラリの使用方法

あるサイトでページを読み込んだ際、最初は各レイアウトの枠組み的な部分を表示、次に ...

「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方
jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方

divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...