勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

JavaScriptでinputタグのtypeを変更

      2014/05/17

チェックボックスの状態によって
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

  関連記事

mzl.qobqfuxq
GoogleMapsAPIでマーカーが全て表示されるように自動ズーム

GoogleMapsAPIでマーカーを複数設置した場合にズームの値や、マーカーの ...

javascript_logo_unofficial-300x300
JavaScriptでAjaxを使わずにクロスドメインから変数を取得する

JavaScriptの配列形式で出力するファイルを作成しておき、 動的にソースに ...

javascript_logo_unofficial-300x300
JavaScriptで三項演算子の中に三項演算子

既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...

javascript_logo_unofficial-300x300
javascriptの注意点

javascriptにてチェックボックスのチェック状況をチェックを ループでまわ ...

javascript_logo_unofficial-300x300
時間差をつけて処理する

setTimeout( 処理, タイムアウト時間 ); で、時間差をつけて処理が ...

javascript_logo_unofficial-300x300
highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる

やりたかった事は、 ・棒グラフと折れ線グラフを入れたい ・Y軸はそれぞれ違う値に ...

javascript_logo_unofficial-300x300
Highstockの使い方とカスタマイズ

株価などの値動きを図表とするローソク足のグラフを何らかの方法で描写したかった。調 ...

javascript_logo_unofficial-300x300
JavaScriptで全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...

javascript_logo_unofficial-300x300
JavaScriptで特定の範囲内から整数値を、数値が被らずにランダムに取り出す

やりたかったのは1位から20位のランキング内で JavaScriptを用いてラン ...

javascript_logo_unofficial-300x300
Flashを用いずJavaScriptでコピー&カット機能を実装する

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...