- ベストアンサー
input要素の入力制限について
<div id="pict"></div> <form action="post" id="f1"> <ul id="elementSize"> <li><label>縦<input type="text" name="height" value="500" />px</label></li> <li><label>横<input type="text" name="width" value="500" />px</label></li> </ul> </form> このような入力欄で、0～9以外の文字が入力された場合と、801以上の数字が入力された場合に、入力欄の後ろに「800以下の数字を入力してください」という文表示させ、800以下の数値が入力されたらこの文を消すようにしたいです。 function $(e){ return document.getElementById(e); } function WindowOnLoad(){ var heightStr = document.createTextNode("800以下の数字を半角で入力してください"); $("f1").height.onblur = function(){ if(this.value.match(/[^0-9]+/)||this.value>800){ $("elementSize").getElementsByTagName("li")[0].appendChild(heightStr); }else{ if($("elementSize").getElementsByTagName("li")[0].lastChild==heightStr){ $("elementSize").getElementsByTagName("li")[0].removeChild(heightStr); } $("pict").style.height = this.value + "px"; } } } if(window.addEventListener){ window.addEventListener("load", WindowOnLoad, false); }else{ window.attachEvent("onload", WindowOnLoad); }} if(window.addEventListener){ window.addEventListener("load", WindowOnLoad, false); }else{ window.attachEvent("onload", WindowOnLoad); } 今、上記のようなJavaScriptを書いて、実装は出来ているのですが、 もっとコードを短く出来ないかと思い質問させていただきました。 よろしくお願いします。
- cybershoot
- お礼率43% (7/16)
- JavaScript
- 回答数7
- ありがとう数4
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
この手のはonkeyupの方がユーザビリティが高くないでしょうか？ （実装方法はご理解なさっているようなので今回は直書きしておきます） <script> function check(obj){ var r=new RegExp(/[^0-9]+/); var v=obj.value; while(v.match(r)){ v=v.replace(r,''); } if(parseInt(v)>800){ alert("800以下"); v=0; } obj.value=v; } </script> <ul> <li><label>縦<input type="text" name="height" value="500" onkeyup="check(this)" />px</label></li> <li><label>横<input type="text" name="width" value="500" onkeyup="check(this)" />px</label></li> </ul>
その他の回答 (6)
- babu_baboo
- ベストアンサー率51% (268/525)
action="post" あぇ～～ ;_; メモリーリークかぁ～ まったくじしんがないんだよね～ あたらしいぶらうざになれば、たしょうはかいぜんされてるはずさぁ～ そうならないために、よぼうさくとして、 http://msdn.microsoft.com/ja-jp/library/bb250448(VS.85).aspx http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=2139 http://www.tagindex.com/kakolog/q4bbs/1201/1434.html http://www.tagindex.com/kakolog/q4bbs/801/963.html
お礼
ばぶばぶーちゃんさん、たくさんの回答ありがとうございました。
- yuu_x
- ベストアンサー率52% (106/202)
<input type="number" value="500" min="0" max="800" pattern="^[1-9][0-9]*"> Opera は対応済み、他のブラウザも順次対応してくるんじゃないかな。 ところで action="post" とは？
補足
回答ありがとうございました。 HTML5で追加される属性ですか？ これは便利ですね！ action="post"も間違いでした。 ajaxの場合、action属性には何を入れればいいのですか？ action="#"でしょうか。
- babu_baboo
- ベストアンサー率51% (268/525)
ていせいします。XHTMLじゃないんだから inputようその / は、かいちゃだめだった。ごめん。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <style type="text/css"> #elementSize li span { color:red; } </style> <div id="pict"></div> <form action="post" id="f1"> <ul id="elementSize"> <li><label>縦<input type="text" name="height" value="500">px</label></li> <li><label>横<input type="text" name="width" value="500">px</label></li> </ul> </form> <script type="text/javascript"> document./*@cc_on @if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/ 'keyup',(function(d,q,r){ var heightStr = d.createElement('span'); heightStr.appendChild(d.createTextNode("800以下の数字を半角で入力してください")); return function(evt){ var e=evt./*@if(1)srcElement@else@*/target/*@end@*/; if(q.test(e.name)){ var p = e.parentNode.parentNode, v=e.value; if(r.test(v)||+v>800)p.appendChild(heightStr);else{ p.lastChild==heightStr && p.removeChild(heightStr); d.getElementById('pict').style[e.name] = v + "px"; } } }; })(document,/^height$|^width$/,/[^0-9]/g), true) </script>
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <style type="text/css"> #elementSize li span { color:red; } </style> <div id="pict"></div> <form action="post" id="f1"> <ul id="elementSize"> <li><label>縦<input type="text" name="height" value="500" />px</label></li> <li><label>横<input type="text" name="width" value="500" />px</label></li> </ul> </form> <script type="text/javascript"> document./*@cc_on @if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/ 'keyup',(function(d,q,r){ var heightStr = d.createElement('span'); heightStr.appendChild(d.createTextNode("800以下の数字を半角で入力してください")); return function(evt){ var e=evt./*@if(1)srcElement@else@*/target/*@end@*/; if(q.test(e.name)){ var p = e.parentNode.parentNode, v=e.value; if(r.test(v)||+v>800)p.appendChild(heightStr);else{ p.lastChild==heightStr && p.removeChild(heightStr); d.getElementById('pict').style[e.name] = v + "px"; } } }; })(document,/^height$|^width$/,/[^0-9]/g), true) </script> くうはくもじをはんかくになおして、そのままこぴぺ。 じしんはないけど、$("height").onkeyup ってメモリーリーク するかもよ？
補足
回答ありがとうございました。 メモリリークというのを初めて聞いたので調べてみました。 http://d.zeromemory.info/2006/03/06/memory-leak-ajax2.html こちらで紹介されているDripというソフトを使用して 補足内容のコードを繰り返しリロードしてみたところ、 確かにmemory usageが増えつづけ減らない状態になっていました。 しかしIE8で同じコードを繰り返しリロードし、 タスクマネージャのプロセスの「メモリ使用量」を凝視しましたが、 メモリ使用量は増加しませんでした（増えてもすぐ減りました）。 これはメモリリークしていないということでしょうか？
- babu_baboo
- ベストアンサー率51% (268/525)
＃２です。「短く」ということばに、びんかんです。^^; $("f1").height.onblur は、まずいだろう！とか 「縦・横」もだろうなぁ～とか すくりぷとを、</body>のちょくぜんにかいたら onloadも、いらなくなくない？とか でも、いべんとをdocumentにつけたら headのなかでも、いいじゃん！ということでこうなりました。 document./*@cc_on @if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/ /*@if(1)'focusout'@else@*/'blur'/*@end@*/,(function(d,q,r){ var heightStr = d.createTextNode("800以下の数字を半角で入力してください"); return function(evt){ var e=evt./*@if(1)srcElement@else@*/target/*@end@*/; if(q.test(e.name)){ var p = e.parentNode.parentNode, v=e.value; if(r.test(v)||+v>800)p.appendChild(heightStr);else{ p.lastChild==heightStr && p.removeChild(heightStr); d.getElementById('pict').style.height = v + "px"; } } }; })(document,/height|width/,/[^0-9]/g), true)
- babu_baboo
- ベストアンサー率51% (268/525)
$("elementSize").getElementsByTagName("li")[0] を this.parentNode.parentNode にすると、ちょっとだけみじかくなるじょ！ そうすると $("f1"). を document.getElementById('f1'). にかえると function $(e){ return document.getElementById(e); } が、ひつようなくなるってのはどう？
補足
すみません、補足内容に書いたJavaScriptに誤りがありました。 お気づきだとは思いますが、念のため補足しておきます。 function $(e){ return document.getElementById(e); } function WindowOnLoad(){ var heightStr = document.createTextNode("800以下の数字を半角で入力してください"); $("height").onkeyup = function(){ if(this.value.match(/[^0-9]+/)||this.value>900){ this.parentNode.parentNode.appendChild(heightStr); }else{ if(this.parentNode.parentNode.lastChild==heightStr){ //.parentNodeが足りなかった this.parentNode.parentNode.removeChild(heightStr); //.parentNodeが足りなかった } $("pict").style.height = this.value + "px"; } } } //WindowOnLoadが閉じられてなかった if(window.addEventListener){ window.addEventListener("load", WindowOnLoad, false); }else{ window.attachEvent("onload", WindowOnLoad); }
お礼
まだメモリリークに関してはよくわからない部分がありますが、当初疑問に思っていたことは解決できたのでこの問題は解決済みとさせていただきます。 皆さんご回答ありがとうございました。
補足
質問内容のコードの末尾の重複している部分は誤りです。 すみません。 2つに分けて書くと見づらいと思うので、 お二方の回答にまとめて補足させていただきます。 確かにonkeyupのほうがユーザビリティに優れていると思います。 アドバイスありがとうございました。 $(e)に関しては他の部分のJavaScriptでIDからの要素取得をよく使うので、 はじめに関数として用意しておいた経緯です。 またonloadに関してはJavaScriptとHTMLを完全に分離する目的で、 JavaScript内に書いてみました。 「800以下の数字を半角で入力してください」の文字を装飾するため、 （CSSでliに文字の装飾、labelに縦・pxの装飾） onkeyup時に次のようになるよう書き換えてみました。 <li><label>縦<input type="text" name="height" value="500" onkeyup="check(this)" />px</label>800以下の数字を半角で入力してください</li> <div id="pict"></div> <form action="post"> <ul> <li><label>縦<input id="height" name="height" type="text" value="500" />px</label></li> <li><label>横<input id="width" name="width" type="text" value="500" />px</label></li> </ul> </form> function $(e){ return document.getElementById(e); } function WindowOnLoad(){ var heightStr = document.createTextNode("800以下の数字を半角で入力してください"); $("height").onkeyup = function(){ if(this.value.match(/[^0-9]+/)||this.value>900){ this.parentNode.parentNode.appendChild(heightStr); }else{ if(this.parentNode.lastChild==heightStr){ this.parentNode.removeChild(heightStr); } $("pict").style.height = this.value + "px"; } } if(window.addEventListener){ window.addEventListener("load", WindowOnLoad, false); }else{ window.attachEvent("onload", WindowOnLoad); }