以下是我的代码：

<!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. 2014年辛星完全解读Javascript第五节 break和continue与错误处理

    先说一下break和continue的主要用法吧,break用于跳出循环,continue用于跳过该循环中的一个迭代.简单的说,就是break直接从该语句跳出,但是continue不会跳出该循环语句, ...

  2. mac 下 sphinx + mysql + php 实现全文搜索（xampp）（1）

      原理: 使用sphinx 中的indexer 生成索引数据 service/web 端 利用searched 调用索引数据 步骤: 下载 sphinx: 下载地址:http://sphinxsea ...

  3. MySQL Partition分区扫盲

    MySQL从5..3开始支持Partition,你可以使用如下命令来确认你的版本是否支持Partition: mysql> SHOW VARIABLES LIKE '%partition%'; ...

  4. Hadoop学习---安装部署

    hadoop框架 Hadoop使用主/从(Master/Slave)架构,主要角色有NameNode,DataNode,secondary NameNode,JobTracker,TaskTracke ...

  5. Linux内核中的常用宏container_of

    Container_of在Linux内核中是一个常用的宏,用于从包含在某个结构中的指针获得结构本身的指针,通俗地讲就是通过结构体变量中某个成员的首地址进而获得整个结构体变量的首地址. Containe ...

  6. DB天气app冲刺第九天

    今天已经是冲刺的第九天了.应该算是进入了冲刺的后半期了.今天的android界面UI设计基本完成了.但还是有一些的bug,自己怎么也调不好,明天需要请教一下大神去. 今天已经把昨天布置的任务完成了.昨 ...

  7. 集成“支付宝” -b

    大致步骤 1.与支付宝签约获取相关参数 合作者身份 ID 与安全校验码 key2.下载需要导入的文件,做相应设置3.在自己的项目中集成支付的方法代码 详细步骤 1.获取合作者身份 ID 与安全校验码 ...

  8. (转)Linux SLUB 分配器详解

    原文网址:https://www.ibm.com/developerworks/cn/linux/l-cn-slub/ 多年以来,Linux 内核使用一种称为 SLAB 的内核对象缓冲区分配器.但是, ...

  9. 关于安装Android Studio的一些问题的解决方法

    问题1:每次Fetching android sdk component information 这是在检查你的 Android SDK .有人会在这里卡上很长时间,很大的原因就是:网络连接有问题.可 ...

  10. [转载]EasyUI Pagination 分页的两种做法

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...