勉強したことのメモ

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

  関連記事

javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...

Leafletで「leaflet.sprite」プラグインを導入してマーカーの色を変更する方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置したい。 ...

八地方区分→都道府県→路線→駅名の連携したセレクトメニュー の実装方法

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

HTMLのカスタムデータ属性をjQueryで取得する際はキャッシュに注意する

ASPを使用したサイトでHTMLのカスタムデータ属性を取得し色々処理したかったん ...

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

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