勉強したことのメモ

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にて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法
JavaScriptにて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法

以前JavaScriptで数値のカンマ区切り化とカンマ区切りの解除を行う方法をメ ...

JavaScriptにて正規表現を用いずに文字列の一括置換を行う方法
JavaScriptにて正規表現を用いずに文字列の一括置換を行う方法

文字列の一括置換を行う際、PHPだとstr_replaceで問題無く対応できるが ...

JavaScriptでCookieを取り扱う「js-cookie」ライブラリの利用方法
JavaScriptでCookieを取り扱う「js-cookie」ライブラリの利用方法

「jquery-cookie」プラグイン開発終了に伴い「js-cookie」ライ ...

Leafletにて表示されているマップを画像としてダウンロードさせる「leaflet-easyPrint」の利用方法
Leafletにて表示されているマップを画像としてダウンロードさせる「leaflet-easyPrint」の利用方法

Leafletにて何らかのボタンをクリックすると表示されているマップを画像として ...

JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法
JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法

JavaScriptでフォームのバリデートを行う際、「半角英数字 正規表現」等で ...