以下是我的代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>小效果</title> <style> .type{32px;} </style> </head> <body> <div> <button id="btn1">-</button> <input type="text" class="type" id="txt"> <button id="btn2">+</button> </div> </body> <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script> $(function(){ var typeTxt; //只能输入大于1的数字
$("#txt").keyup(function(){ $(this).val($(this).val().replace(/[^1-9.]/g,'')); }).bind("paste",function(){ $(this).val($(this).val().replace(/[^1-9.]/g,'')); }).css("ime-mode", "disabled");
//取值 $("#txt").change(function(){ typeTxt = $("#txt").val(); }) function up(){ typeTxt = $("#txt").val(); if(typeTxt>1){ typeTxt-=1; $("#txt").val(typeTxt);} else{ alert("数字不能小于1"); } } function down(){ typeTxt = $("#txt").val(); if(typeTxt>=1){ typeTxt++; $("#txt").val(typeTxt);} else{ alert("数字不能小于1");} } $("#txt").keyup(function(e){ if(e.keyCode == 38){ down(); } if(e.keyCode == 40) { up();} }); $("#btn1").click(function(){ up(); }); $("#btn2").click(function(){ down(); }); }) </script> </html>
用的是正则表达式的方法。
下面是主管的代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload=function(){ var oInp1=document.getElementById("inp1"); var oInp2=document.getElementById("inp2"); var oInp3=document.getElementById("inp3"); oInp1.onclick=function(){ oInp2.value>1?oInp2.value-=1:alert("不能小于1"); }; oInp3.onclick=function(){ oInp2.value=parseInt(oInp2.value)+1; }; //大0 48 //大9 57 //小0 96 //小9 105 //退格 8 oInp2.onkeydown=function(ev){ var ev=ev||event; if(((ev.keyCode<48 || ev.keyCode>57) && (ev.keyCode!=8)) && (ev.keyCode<96 || ev.keyCode>105) ){ return false; } }; oInp2.onkeyup=function(){ if(this.value<1 && ev.keyCode!=8) { this.value=1 } }; } </script> </head> <body> <input id="inp1" type="button" value="-"> <input id="inp2" style=" 30px; text-align:center;" type="text" value="5"> <input id="inp3" type="button" value="+"> <h3>要求</h3> <ul> <li>点击加减按钮可以使文本框内数字增减1但不能小于1</li> <li>文本框内只能输入数字，并且大小键盘都可以，可以用退格键删除文本框里的内容</li> <li>文本框内不可输入小于1的整数</li> </ul> </body> </html>
再下面，是我不用表达式的方案，不过还有个小bug
<!doctype html> <html> <head> <meta charset="utf-8"> <title>小效果</title> <style> .type{32px;} </style> </head> <body> <div> <button id="btn1">-</button> <input type="text" class="type" id="txt"> <button id="btn2">+</button> </div> </body> <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script> $(function(){ var typeTxt; //只能输入大于1的数字 $("#txt").keyup(function(){ if(isNaN($(this).val()) || parseInt($(this).val())<1){ $(this).val(""); } else{typeTxt = $(this).val(); } }); function up(){ typeTxt = $("#txt").val(); if(typeTxt>1){ typeTxt-=1; $("#txt").val(typeTxt); } else{ alert("数字不能小于1"); } } function down(){ typeTxt = $("#txt").val(); if(typeTxt>=1){ typeTxt++; $("#txt").val(typeTxt); } else{ alert("数字不能小于1"); } } $("#txt").keyup(function(e){ if(e.keyCode == 38) down(); if(e.keyCode == 40) up(); }); $("#btn1").click(function(){ up(); }); $("#btn2").click(function(){ down(); }); }) </script> </html>