以下是我的代码：

<!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. PHP核心代码库中的APC缓存说明123

    1.APC缓存简介APC,全称是Alternative PHP Cache,官方翻译叫”可选PHP缓存”.它为我们提供了缓存和优化PHP的中间代码的框架. APC的缓存分两部分:系统缓存和用户数据缓存 ...

  2. 第2章 Git安装与设置

    2.1 安装Git 略 2.2 设置Git 通过命令git config,用户可以把此类信息提供给本地版本库. 全局变量:在这台计算机上使用任何Git版本库时,这些全局变量的值都起作用.在相关命令中加 ...

  3. 【BZOJ 1070】[SCOI2007]修车

    Description 同一时刻有N位车主带着他们的爱车来到了汽车维修中心.维修中心共有M位技术人员,不同的技术人员对不同的车进行维修所用的时间是不同的.现在需要安排这M位技术人员所维修的车及顺序,使 ...

  4. [转载]Dotfuscator Professional Edition 4.9.7500.9484 混淆工具破解版+使用教程

    如有转载,请注明出处: http://www.cnblogs.com/flydoos/archive/2012/01/26/2329536.html Dotfuscator Professional ...

  5. 阿里云,CentOS下yum安装mysql,jdk,tomcat

    首先说明,服务器是阿里云的,centos6.3_64位安全加固版.首先需要登陆进来,使用的是putty,因为最初的时候,Xshell登陆会被拒绝. 0. 创建个人文件夹 # 使用 yum 安装tomc ...

  6. HDU4502吉哥系列故事——临时工计划

    http://acm.hdu.edu.cn/showproblem.php?pid=4502 题意 :这个是中文题,我就不再详述了. 思路 : 以前做过一个活动区间选择,结果就按着那个思路敲了,后来发 ...

  7. Mybatis代码生成器 xml配置文件 连接SQL SERVER 2005

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE generatorConfiguratio ...

  8. Eclipse执行Hadoop WordCount

    前期工作 我的Eclipse是安装在Windows下的,通过Eclipse执行程序连接Hadoop, 需要让虚拟机的访问地址和本机的访问地址保持在同一域内,虚拟机的地址更改前面的文章介绍过了,如果想改 ...

  9. PHP开篇之环境的搭建

    PHP开篇之环境的搭建 Wamp软件下载:http://www.wampserver.com/ 此时是2.5版本 下载下来一键安装. 安装有个主意 这里先不用管 或者smtp@qq.com 13643 ...

  10. 在服务器端使用 Git 创建源代码仓库

    下面简单讲述在服务器搭建 Git 仓库的过程. 安装 Git 程序 Git 是分布式的,即程序不区分服务端和客户端,大部分 Linux 发行版的官方源里都有它,比如在 Archlinux 里安装 Gi ...