勉強したことのメモ

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にて指定した要素の親要素を削除する方法
jQueryにて指定した要素の親要素を削除する方法

jQueryにて指定した要素の親要素を削除したいケースがあった。通常の場合だと親 ...

VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法
VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法

youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...

jQueryとCSSで指定したテキストに対してラインマーカーを引く方法
jQueryとCSSで指定したテキストに対してラインマーカーを引く方法

サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...

textareaを自動でリサイズしてくれる「ExpandingTextareas」プラグインの利用方法
textareaを自動でリサイズしてくれる「ExpandingTextareas」プラグインの利用方法

textareaのheight以上に文字を(複数行)入力しても当然heightの ...

バニラJavaScriptのDOMContentLoadedとは?
バニラJavaScriptのDOMContentLoadedとは?

jQuery等を用いない素のJSで書かれたプログラムを触る機会があり、そのソース ...