以下是我的代码：

<!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. Linux下crontab详解

    1.crond介绍 crond是Linux下的任务调度命令,让系统定期执行指定程序.crond命令每分钟都会检查是否有要执行的工作,若有要执行的程序便会自动执行. linux下任务调度工作主要分两类: ...

  2. frame 之间访问

    index.asp代码 <frameset rows="50,*,20" cols="*" frameborder="no" bord ...

  3. Windows.Andy.Code4App.dll Win8.1/WP8.1通用类库@ver1.0.0

    直接入题! Win8.1和WP8.1眼下已经渐渐融为一体,WP8.1不断向Win8.1靠拢,虽然一些方法上WP8.1和Win8.1不同(ps:WP8.1和Win8.1的不同之处),但大部分还是相同的. ...

  4. 【单例模式】单例模式 & GCD单例模式 & 将封装单例模式到宏

    懒汉式单例模式 下面的代码块, 基本是单例模式的完整版本了. 可扩展的地方,可以在init方法中作扩展. // static 在全局变量的作用域仅限于当前文件内部 static id _instanc ...

  5. java第四课：数组

    1.数组声明时,必须有中括号,但不指定数组的元素个数2.初始化时,必须指定元素个数3.数组元素内容仅能用于声明时初始化,不能用于赋值.如:char[] week; week={'1','2','3'} ...

  6. 原创新闻 11 个最佳 jQuery 滚动条插件

    通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...

  7. PAT-乙级-1002. 写出这个数 (20)

    1002. 写出这个数 (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 读入一个自然数n,计算其各位数字 ...

  8. 认识OD的两种断点

    OllyDBG从原理上来区分,有两种不同的断点:软件断点和硬件断点. 也许会有朋友说那不是还有内存断点吗? 内存断点严格来说是属于一种特殊的软件断点. 内存断点: 内存断点每次只能设置一个,假如你设置 ...

  9. Quartz任务调度快速入门（转）

    概述 了解Quartz体系结构 Quartz对任务调度的领域问题进行了高度的抽象,提出了调度器.任务和触发器这3个核心的概念,并在org.quartz通过接口和类对重要的这些核心概念进行描述: ●Jo ...

  10. uva 10056

    概率 Q += p*pow(1-p, i*n+k-1) i = 0,1,2,3...... #include <cstdio> #include <cmath> int mai ...