勉強したことのメモ

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

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

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

2013/12/23 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で動作確認できた。

関連記事

: CKEditor5(WYSIWYGエディタ)をページ遷移無しでtextareaに切り替える方法

ラジオボタンを選択することでCKEditor5(ウィジウィグエディタ)とテキスト ...

: formのpasswordとtextをjQueryで切り替える方法

formでtype="password"を指定していると内容を入力した際に｢●● ...

: CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成

CodeIgniter4.4.4&Bootstrap&jQuer ...

: 「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...

: jQueryで後から追加した要素にhasClass / addClass / removeClassを使用した際の挙動

jQueryで後から追加した要素にhasClass / addClass / r ...