以下是我的代码：

<!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. StatusStrip状态栏控件

    1.ToolStripStatusLabel statusstrip1.Items[].Text="日期"+DateTime.Now.ToString(); Thread p = ...

  2. MySQL --slave-skip-errors

    官方说明: --slave-skip-errors=[err_code1,err_code2,...|all] (MySQL Cluster NDB 7.0.33 and later; MySQL C ...

  3. Jquery Highcharts 选项配置 说明文档

    Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,下面为Highcharts常用的最核心的参数选项配置. Chart:图表区选项 Chart图表区选项用于设置图表区相关属性 ...

  4. Java程序员的发展前景

    不知道什么时候开始,IT业初级程序员的工作性质与进城打工的"农民工"变得如此惊人的相似.很多IT公司的高管认为"人便宜,就是要用到坏掉,然后再找更便宜.更年轻的" ...

  5. Delphi XE5 android listview

    C:\Users\Public\Documents\RAD Studio\12.0\Samples\FireMonkeyMobile\ListView 路径下有两个dpk,装完后listview也能实 ...

  6. 1059: [ZJOI2007]矩阵游戏 - BZOJ

    Description 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏——矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两 ...

  7. centos7安装chrome及加载poatman开发插件

    为什么要安装chrome?因为centos7的默认浏览器firefox的实在是不习惯,上面占了太多,本来显示器就不大... 好了,首先下载chome的rpm安装包(如果需要的可以留言,我有备份) 然后 ...

  8. CSS 命名规范及标题供参考与学习

    一.CSS 命名规范   XHTML-CSS写作建议 所有的xhtml代码小写 属性的值一定要用双引号("")括起来,且一定要有值 每个标签都要有开始和结束,且要有正确的层次 空元 ...

  9. [js综合问题汇总]js窗口关闭事件,表单名称,父窗口子窗口,var变量名

    <script type="text/javascript"> window.onbeforeunload = onbeforeunload_handler; //wi ...

  10. struts2 标签的使用之一 s:if

    struts2 的web 项目中为了方便的编写jsp,标签是最好的选择 1:struts2 标签库的定义在**-core-版本号.jar META-INF 路径下找到struts-tags.tld文件 ...