- ベストアンサー
JavaScriptフォームで連動する入力エリアを制御する方法
- JavaScriptを使用して、入力フォームの連動するエリアを制御する方法について質問です。
- 具体的には、１番の入力がされた時に、２番と３番のエリアをグレーにし、入力不可にする方法を知りたいです。
- 上記のHTMLコードを使ったフォームでの実装方法を教えてください。
- a-----n
- お礼率58% (77/131)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
入力不可にするにはdisabled属性にtrueなどを設定すればいいです。 背景色を変えるにはstyleのbackground-colorを設定すればいいです。 とても単純なやりかたですが、 <html> <head> <script type="text/javascript"> function testFunc(textObj) { var flag = textObj.value != ''; var boxColor = flag ? "gray" : ""; textObj.form.area.disabled = flag; textObj.form.area.style.backgroundColor = boxColor; textObj.form.business.disabled = flag; textObj.form.business.style.backgroundColor = boxColor; } </script> </head> <body> <form> <table> <tr> <th align="right">1番</th> <td><input type="text" size="10" name="shopid" id="shopid" onkeyup="testFunc(this)" /></td> </tr> <tr> <th align="right">2番</th> <td><input type="text" size="10" name="area" /></td> </tr> <tr> <th align="right">3番</th> <td><input type="text" size="10" name="business" /></td> </tr> </table> </form> </body> </html> で、とりあえずやりたいことは出来るかと思います。 多分、もっと素敵なやりかたをどなたかが教えてくださると思います。
その他の回答 (2)
- LOHA
- ベストアンサー率52% (203/388)
jQueryを使った方法。多分ブラウザは選びません。 body部をいじらなくていいのが嬉しいですね。 <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var o = $("[name='shopid']:input"); o.keyup(function() { var t = $("[name!='shopid']:input"); if (o.val() != "") { t.attr("disabled", "disabled").css("background-color", "#DDD"); } else { t.removeAttr("disabled").css("background-color", ""); } }); }); </script> </head> <body> <form> <table> <tr> <th align="right">1番</th> <td><input type="text" size="10" name="shopid"></td> </tr> <tr> <th align="right">2番</th> <td><input type="text" size="10" name="area"></td> </tr> <tr> <th align="right">3番</th> <td><input type="text" size="10" name="business"></td> </tr> </table> </form> </body> </html> 私にはもうこれで限界ですが、もっともっともっと素敵なやりかたをどなたかが教えてくださると思います。
- babu_baboo
- ベストアンサー率51% (268/525)
ぜんかくくうはくは、はんかくにしてね。 ぶらうざをえらぶけどね。 <!DOCTYPE html> <title></title> <style type="text/css"> input[type="text"][disabled="disabled"] { background : #ddd; color : #888; } </style> <body> <form id="test" action="#"> <p> 1番<input type="text" size="10" name="shopid" aria-controls="area business" onchange="hoge.call(this, event)"> </p> <p> 2番<input type="text" size="10" name="area"> </p> <p> 3番<input type="text" size="10" name="business"> 4番<input type="text" size="10" name="business"> </p> </form> <script type="application/javascript; version=1.8"> var hoge = function (evt) let ( es = this.form.elements, flag = (this.value != '') ) this.getAttribute('aria-controls') .split(/\u0020/g) .reduce( (function (a, b) let(n = es[b]) a.concat ( (n.length) ? Array.slice (n) : [n])), []) .forEach ( (function (n) n.disabled = flag)); </script> ハードルあげたな～！じゃ～おれも！ たぶん、もっともっとすてきなやりかたをどなたかがおしえてくださるとおもいます。 もしくは、バズーカでうたれるか・・・。
お礼
お返事遅くなりました。 わかりやすい回答ありがとうございました。 できました。 他の方も素敵なやりかたを教えていただきありがとうございました。