勉強したことのメモ

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

  関連記事

Leafletで表示したマップにジェスチャーハンドリングを追加する方法(Leaflet.GestureHandling)

GoogleMapをズームする際にPCだと「Ctrl+スクロール」、スマホだと「 ...

JavaScript / PHPにて「lz-string」を用いてデータの圧縮・展開する方法

文字数が多いGETパラメータを送信したいというケースがあった。また、送信側はJa ...

ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法

ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...

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

CodeIgniter4.4.4&Bootstrap&jQuer ...

Leafletでマップ上に通知(トースト)機能を追加する方法(Leaflet.Notifications)

Leafletでマーカー内のボタンクリック時等、ユーザーが何らかのアクションを行 ...