readonlyをdisabledっぽく見せるコードは８行で書ける！｜ 25歳でフリーランス28歳で起業したエンジニア -じゃけぇ- のあれこれ

━目次━

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

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

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

その原因は

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

ためです。

考える人

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

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

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

なぜなら

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

からです。

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

じゃけぇ

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

readonlyとdisabledの違い

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

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

サンプルコード

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

<script type="text/javascript">
  $(function(){
    
    //input属性のものを一括で取得する
    var inputItem = document.getElementsByTagName("input");
    //ループしながら全てに処理を行う
    for (var i=0; i<inputItem.length; i++){
      //項目がreadonlyの場合のみ処理
      if (inputItem[i].readOnly){
        //背景色を設定する
        inputItem[i].style.backgroundColor = "#e9e9e9";
        //タブ遷移を不可にする
        inputItem[i].tabIndex = "-1";
        //テキストボックスにマウスオーバーした際に禁止マークに切り替える
        inputItem[i].style.cursor = "not-allowed";
      }
    }
  });
</script>

$(function(){

//input属性のものを一括で取得する

var inputItem = document.getElementsByTagName("input");

//ループしながら全てに処理を行う

for (var i=0; i<inputItem.length; i++){

//項目がreadonlyの場合のみ処理

if (inputItem[i].readOnly){

//背景色を設定する

inputItem[i].style.backgroundColor = "#e9e9e9";

//タブ遷移を不可にする

inputItem[i].tabIndex = "-1";

//テキストボックスにマウスオーバーした際に禁止マークに切り替える

inputItem[i].style.cursor = "not-allowed";

}

});

</script>

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

１ポイントテクニック

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

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

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

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

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

それでは！また！！