• 目的別厳選記事




web開発をしている人なら必ず1度は直面したことがあると思います『readonly/disabled問題』

「入力不可のテキストボックスは分かり易く背景色をグレーにしたいからとりあえずdisabled付けとけば良いや~」

ってノリでやってると登録処理なんかやったときに上手く動かなかったりします。

その原因は


disabledの項目はフォームを送信しても値が送られない


ためです。

考える人考える人

まぁ”disabled”っていうくらいじゃけそうなんじゃろうの

「まじかー。。おっreadonlyって便利そうなやつあるじゃん!これにしよ!」

って普通にreadonlyを使うと大体お客さんから文句を言われます。

なぜなら


readonlyを指定するとフォームで値は送れるが、普通のテキストボックスと見た目に差がない


からです。

つまりユーザが入力出来る項目かと思ってフォーカスインして、入力しようとして初めて入力不可項目だと分かるわけですね。

じゃけぇじゃけぇ

それらの問題を解決するためのコードをたった8行で書いたので良かったら使ってね

readonlyとdisabledの違い

readonly disabled
見た目は普通のテキストボックスと同じ テキストボックスの背景色がグレー
フォーカスイン可能 フォーカスイン不可
編集不可 編集不可
タブで遷移する タブで遷移しない。(とばされる)
フォームのsubmitで値が送信される フォームのsubmitで値が送信されない

これらを総括して、フォームで値が送信されるけど見た目はdisabledっぽい項目を作ります。

サンプルコード

以下がサンプルコードになります。


まずgetElementsByTagNameを使用することでinput要素を一括で取得します。

1ポイントテクニック


操作範囲を限定的にしたい場合は、捜査したい箇所のみdivタグで囲んで、
(<div id=”controlArea”> ~ </div>のように)

document.getElementById(“controlArea”).getElementsByTagName(“input”);

とすることでその範囲のinput属性。とすることも可能です。



取得項目をループさせながら当該項目がreadonlyの場合は
①背景色の設定
②タブ遷移不可の設定
③マウスオーバー時に禁止マークにする設定

をすることで

限りなくdisabledっぽくてフォームのsubmitできちんとデータが送信されるテキストボックスを作ることができます。


それでは!また!!

最後まで読んで頂きありがとうございます!
人気の記事だけ集めたので是非覗いていってください^^
 厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-