以下是我的代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小效果</title>
<style>
.type{width: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>){ typeTxt-=; $("#txt").val(typeTxt);}
else{ alert("数字不能小于1"); }
}
function down(){
typeTxt = $("#txt").val();
if(typeTxt>=){ typeTxt++; $("#txt").val(typeTxt);}
else{ alert("数字不能小于1");}
}
$("#txt").keyup(function(e){
if(e.keyCode == ){ down(); }
if(e.keyCode == ) { 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>?oInp2.value-=:alert("不能小于1");
};
oInp3.onclick=function(){
oInp2.value=parseInt(oInp2.value)+;
}; //大0 48
//大9 57
//小0 96
//小9 105 //退格 8
oInp2.onkeydown=function(ev){
var ev=ev||event;
if(((ev.keyCode< || ev.keyCode>) && (ev.keyCode!=)) && (ev.keyCode< || ev.keyCode>) ){
return false;
}
};
oInp2.onkeyup=function(){
if(this.value< && ev.keyCode!=)
{
this.value=
}
};
}
</script>
</head> <body>
<input id="inp1" type="button" value="-">
<input id="inp2" style=" width:30px; text-align:center;" type="text" value="">
<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{width: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())<){
$(this).val("");
}
else{typeTxt = $(this).val(); }
}); function up(){
typeTxt = $("#txt").val();
if(typeTxt>){
typeTxt-=;
$("#txt").val(typeTxt);
}
else{
alert("数字不能小于1");
}
}
function down(){
typeTxt = $("#txt").val();
if(typeTxt>=){
typeTxt++;
$("#txt").val(typeTxt);
}
else{
alert("数字不能小于1");
}
}
$("#txt").keyup(function(e){
if(e.keyCode == )
down();
if(e.keyCode == )
up();
}); $("#btn1").click(function(){
up();
});
$("#btn2").click(function(){
down();
}); })
</script>
</html>

前端的小Demo——涉及keyCode的更多相关文章

  1. 一周一个小demo — 前端后台的交互实例

    这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...

  2. 新手 gulp+ seajs 小demo

    首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...

  3. js存款计算器原生小demo

    大家好,本人是初入前端的一枚程序猿,深知js底层开发的重要性,这也是我的软肋所在(曾经以为),渐渐的明白了一个道理,饭要一口口吃,路要一步步走,这也是我想告诉给所有刚刚进入IT行业的技术员们,沉下心, ...

  4. Swift基础之实现一个镂空图片的小Demo

    前两天看了别人的文章,涉及到了镂空的展示,所以我在这里把实现的内容写成Swift语言的小Demo,供大家欣赏 首先,需要创建导航视图,然后创建两种展示方式的按钮 let vc = ViewContro ...

  5. H5 PWA技术以及小demo

    H5 PWA技术 1.原生app优缺点 a.体验好.下载到手机上入口方便 b.开发成本高(ios和安卓) c.软件上线需要审核 d.版本更新需要将新版本上传到不同的应用商店 e.使用前需下载 2.we ...

  6. 移动端页面弹幕小Demo实例说明

    代码地址如下:http://www.demodashi.com/demo/11595.html 弹幕小Demo实例地址,点击看效果 写在前面:尝试做了一下弹幕的实例,欢迎提出并指正问题 问题说明: D ...

  7. 2、链接数据库+mongodb基础命令行+小demo

    链接数据库并且打印出数据的流程:1.在CMD里面输入 mongod 2.在CMD里面输入 mongo 3.在输入mongodb命令行里面进行操作,首先输入 show dbs 来查看是否能够链接得上库4 ...

  8. js特效 15个小demo

    js特效和15个小demo 代码如下:images文件夹未上传 1.图片切换: <!DOCTYPE html> <html> <head> <title> ...

  9. SpringBoot-Vue实现增删改查及分页小DEMO

    前言 主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查.分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程. 开发栈 前端 开 ...

随机推荐

  1. AJAX 原理(转摘)

    在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...

  2. EXPLAIN PLAN获取SQL语句执行计划

    一.获取SQL语句执行计划的方式 1. 使用explain plan 将执行计划加载到表plan_table,然后查询该表来获取预估的执行计划 2. 启用执行计划跟踪功能,即autotrace功能 3 ...

  3. .net sql connection pool leak

    Timeout expired.  The timeout period elapsed prior to obtaining a connection from the pool.  This ma ...

  4. 解决mybatis查询返回结果值串查

    方式一: 通过as 指定 大写重名列的 别名 方式二: 命名数据库中表名时 每个表的主键 id 要起不同的名称, 避免主键重复(但是子表的外键可以和主表的id主键重名, 你想啊, 从表的外键性质不就是 ...

  5. Dapper使用方法

    这里记下Dapper容易忘的使用方法: 返回的数据可以有相同名称的列,会分配到不同的类上,默认使用Id这个列作为分割列 connection.Open();  //手动打开的话会保持长连接,否则每次查 ...

  6. springside springmvc 的一个SB问题

    <form  id="inputForm" modelAttribute="order" action="${ctx}/myorder/orde ...

  7. Eat the Trees hdu 1693

    Problem DescriptionMost of us know that in the game called DotA(Defense of the Ancient), Pudge is a ...

  8. Linux系统下如何配置SSH?如何开启SSH?

    SSH作为Linux远程连接重要的方式,如何配置安装linux系统的SSH服务,如何开启SSH?下面来看看吧(本例为centos系统演示如何开启SSH服务). 查询\安装SSH服务 1.登陆linux ...

  9. [模拟]ZOJ3485 Identification Number

    题意:给了一串15位或18位的身份证号码,求 在改变最少位数的情况下, 输出正确合法的身份证号 合法的身份证 是按照以下规则: 前6位以及“Order code”三位  一定合法 其中X是根据前17位 ...

  10. [itint5]棋盘漫步

    要注意dp[0][0]要初始化为1. int totalPath(vector<vector<bool> > &blocked) { int m = blocked.s ...