- ベストアンサー
ラジオボタンにチェックを入れて、テキストボックスのコメントを消すには
どなたかお力を・・・ 宜しくお願いします。 メールフォームを作成していて、 テキストボックス入力欄 ○ラジオボタン01 ○ラジオボタン02 から、１箇所選択してもらうようにしてあります。 テキストボックスに始めから、例を記入してあるのですが、 ラジオボタンにチェックを入れた際に消えるようにしたいのです。 フォームのコメントを消すjavascriptは変更してもらっても構いません。 <INPUT type="text" name="あいうえお" onfocus="if (this.value == '例）Corneometer') this.value = '';" onblur="if (this.value == '') this.value = '例）テスト';" value="例）テスト"> <INPUT type="radio" name="かきくけこ" value="ラジオ01" onClick="check_reset(this,10)">ラジオ01 <INPUT type="radio" name="かきくけこ" value="ラジオ02" onClick="check_reset(this,11)">ラジオ02
- freakale
- お礼率60% (14/23)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
ラジオボタンを押した後に記入する可能性があるなら、 記入するときにラジオボタンをクリアした方がよいのでは？ <script type="text/javascript"> window.onload = function() { setFormElement(); } function setFormElement() { var f=document.getElementById('f0'); for (var i=0;i<f.length;i++){ if (f[i].name=='r0') f[i].onclick=function(){this.form.t0.value=''}; if (f[i].name=='t0') f[i].onfocus=function(){ var f=this.form; for(var i=0;i<f.length;i++) if(f[i].name=='r0' && f[i].checked){f[i].checked=false;break;} }; } } </script> <form id='f0'> <p> <input type="text" name="t0" id="t0" value="例）テスト" /> <input type="radio" name="r0" value="ラジオ01" id="r01"><label for="r01">ラジオ01</label> <input type="radio" name="r0" value="ラジオ02" id="r02"><label for="r02">ラジオ02</label> <input type="radio" name="r0" value="ラジオ03" id="r03"><label for="r03">ラジオ03</label> </p> </form>
その他の回答 (4)
変ですね・・・。 何かミスをしたかと思い、掲示板に出したソースからコピー＆ペーストして試してみましたが、私のところでは動作します。 (IE6, IE7, Firefox3, Opera9.6, Safari3.1.2, 全てWindows) ページをリロード云々というのは、キャッシュに古いものが残っていて何か変なことになっているということはありませんか？
補足
私の方ももう一度同じ環境(IE6, IE7, Firefox, Opera, Safari,Windows)で試してみて気づいたのですが、 初期コメントを消してから、新しくコメント記入 ↓ ラジオボックスにチェック ↓ 消える ↓ もう一度記入 ↓ ラジオボックスにチェック ↓ 消えない といった感じで、一度ラジオボックスにチェックを入れて消した後、再度記入した場合は消えないようです。
No.2です。 テキストボックスの内容を変更した後でも、それを消してよいということであれば、もっと簡単になります。 Javascript部分だけを書いておきます。(No.2から不要箇所を削除しただけですが。) --- window.onload = function() { // ラジオボタンボタンにチェックを入れたときの動作 setRadioClick(function() { document.getElementById('t0').value = ''; setRadioClick(null); }); // ラジオボタンにonclickを設定 function setRadioClick(fn) { var inputs = document.getElementById('f0').getElementsByTagName('input'); for (var i = 0, n = inputs.length; i < n; i++) { if (inputs[i].type == 'radio') inputs[i].onclick = fn; } } }
お礼
わざわざありがとうございます。 テストしてみたのですが、テキストフォーム記入後にページをリロードした後であれば消えてくれるようですが、そのままだと消えないようです。 単純にコピペしただけでテストしてみたので、私の方のミスかもしれませんが…。
ラジオボタンにチェックを入れたらテキストボックスの初期値を消す部分のみですが、こんなのはどうでしょう？ (onfocusやonblurの部分は抜いてあります) テキストボックスの内容が初期値から変更されないままでラジオボタンにチェックが入れられた場合に、テキストボックスの内容を消すようにしてあります。 --- <html> <head> <script type="text/javascript"> window.onload = function() { // テキストボックスの内容に初期値からの変更があったときの動作 document.getElementById('t0').onchange = function() { this.onchange = null; setRadioClick(null); } // ラジオボタンボタンにチェックを入れたときの動作 setRadioClick(function() { document.getElementById('t0').onchange = null; document.getElementById('t0').value = ''; setRadioClick(null); }); // ラジオボタンにonclickを設定 function setRadioClick(fn) { var inputs = document.getElementById('f0').getElementsByTagName('input'); for (var i = 0, n = inputs.length; i < n; i++) { if (inputs[i].type == 'radio') inputs[i].onclick = fn; } } } </script> </head> <body> <form id='f0'> <input type="text" name="t0" id="t0" value="例）テスト" /> <input type="radio" name="r0" value="ラジオ01">ラジオ01</input> <input type="radio" name="r0" value="ラジオ02">ラジオ02</input> <input type="radio" name="r0" value="ラジオ03">ラジオ03</input> </form> </body> </html> </html>
お礼
こちらも無事動作しています。ありがとうございました。 初期値のみが消えるパターンも、場合よっては使用させて頂きたいと思っています。
先日教えていただいたオブジェクト指向的な書き方でやってみました！ なので正しいかどうかは微妙。^^; つっこみお願いします！ <html> <body> <INPUT type="text" name="あいうえお" value="例）Corneometer"> <INPUT type="radio" name="かきくけこ" value="ラジオ01" onClick="inptxt1.cls();check_reset(this,10)">ラジオ01 <INPUT type="radio" name="かきくけこ" value="ラジオ02" onClick="inptxt1.cls();check_reset(this,11)">ラジオ02</div> <hr> <INPUT type="text" name="aiueo" value="例）MyCar"> <INPUT type="radio" name="kaki" value="ラジオ01" onClick="inptxt2.cls();check_reset(this,10)">ラジオ01 <INPUT type="radio" name="kaki" value="ラジオ02" onClick="inptxt2.cls();check_reset(this,11)">ラジオ02</div> <script> var inptxt1 = new txtValue('あいうえお'); var inptxt2 = new txtValue('aiueo'); function txtValue( elmName ){ var elm = document.getElementsByName( elmName )[0]; this.elm = elm; this.initval = this.elm.value; elm.onfocus = (function(f_){return function(){f_.fcs.call(f_);}})(this); elm.onblur = (function(f_){return function(){f_.blr.call(f_);}})(this); this.fcs = function(){ if(this.elm.value==this.initval) this.elm.value = ''; } this.blr = function(){ if(this.elm.value=='') this.elm.value = this.initval; } this.cls = function(){ this.initval = ''; this.elm.value =''; } } function check_reset(x,y){;} </script> </body>
お礼
どうもありがとうございます。 無事に動作しています。 テキストフォームに書き込んだものも、チェックすると消えるので使い勝手が良いですね 私も素人なので、正しいかどうかはわからないのですが・・・ いろいろな環境で試してみたいと思います。
お礼
ありがとうございます。 確かに、記入するときにラジオボタンをクリアできた方が親切ですよね テストしてみましたが、理想の動きになりました^^ いろいろとどうもありがとうございました。感謝です！