勉強したことのメモ

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プラグインのDateTimePickerで年月日と時間のピッカーを実装する方法
jQueryプラグインのDateTimePickerで年月日と時間のピッカーを実装する方法

jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...

郵便番号を入力すると住所を自動で入力してくれる「ajaxzip3」ライブラリの利用方法
郵便番号を入力すると住所を自動で入力してくれる「ajaxzip3」ライブラリの利用方法

お問い合わせフォームのようなページで郵便番号及び住所欄がある場合、ユーザーが郵便 ...

JavaScriptでメール送信を行える「EmailJS」の利用方法
JavaScriptでメール送信を行える「EmailJS」の利用方法

お問い合わせフォーム等の記入内容をメールで送信する際、通常はPHP等サーバサイド ...

YouTube埋め込み動画が再生終了したタイミングでJavaScriptの処理を実行させる方法
YouTube埋め込み動画が再生終了したタイミングでJavaScriptの処理を実行させる方法

YouTube埋め込み動画が再生終了した際に、あらかじめ登録してあるJavaSc ...