number类型的input样式修改及绑定左右按钮

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Jay Skript And The Domsters</title>
    <style type="text/css">
        *{border:none;margin:0px;padding:0px;}
        .number{ padding: 36px 0 28px;width:400px;margin:auto}
        .minus{width: 30px; height: 30px; text-align: center;border: solid 1px #eaeaea; background: #f5f5f5; color: #9e9e9e;}
        .numbox{border-top: solid 1px #eaeaea; border-bottom: solid 1px #eaeaea; height: 28px; width:60px; color: #333333; margin-left:-8px; text-align: center; background: transparent;}
        .plus { margin-left: -8px;}
    </style>
</head>
<body >
<div class="number">
    购买数量:
    <div class="mui-numbox">
        <button class="minus" type="button" onclick="opera(‘val‘, false);">-</button>
        <input class="numbox" type="number" id="val" value="0"/>
        <button class="minus plus" type="button" onclick="opera(‘val‘, true);">+</button>
        人次
    </div>

    <script type="text/javascript">
        function opera(x, y) {
            var rs = new Number(document.getElementById(x).value);

            if (y) {
                document.getElementById(x).value = rs + 1;
            } else if( rs >0) {
                document.getElementById(x).value = rs - 1;
            }

        }
    </script>
</body>
</html>

  

原文地址:https://www.cnblogs.com/renewload/p/11227302.html

时间: 2024-08-29 20:41:38

number类型的input样式修改及绑定左右按钮的相关文章

html5 input[number]类型输入非数字字符val()为“”和解决方案

html5新增的number输入类型会在input框获得焦点的时候呼起数字键盘,增加了体验的效果.但是在一些安卓机器上,还是能够切换道字符输入,用户也会不小心输入"+""-"之类的非数字字符.测试了一下,number类型是会自动忽略字母字符和其他非数字字符的,除了"+""-""."这两个字符可以输入,因为这两个是正负数和小数点的符号. number类型还有一个很坑的点是,如果输入框中的内容不是纯数字(正数,

解决input,number类型的maxlength无效

使用input数字number类型的时候maxlength无效 假设需要控制输入数量为5,可以用以下方式: <input type="text"  maxlength="5" />   效果ok <input type="number"  maxlength="5" />  无效 改成这个: <input type="number" oninput="if(value

从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)

(21)和(22)写的不好,跳过. (23)AJAX异步加载 插件:dojo/request 参数:request 语法(get): request.get(URL).then(成功回调函数,失败回调函数); 第一个回调函数是成功的,参数用response:(也可以用其他的) 第二个回调函数是失败的,参数用error:(也可以用其他的) 注: ①读取本地比较简单,直接填写本地的url即可: ②如果读取服务器端(比如数据库),那么需要相应的支持,例如python脚本等(我自己目前对python.和

用Javascript清空(重置)文件类型的INPUT元素的值

之前在StackOverflow回答了这个问题,现在整理到Blog里. 因为安全限制,脚本是不能随意设置其value值的,所以并不能像其它表单输入域那样用属性来设置使其重置. 重置一个文件域的值,归纳起来主要有 3 种方法. 本文分析这三种方法的浏览器兼容性以及优缺点,并给出一个比较完美的综合方案的代码和Demo. 重置文件域的三种方法: 设置value属性为空. 对于IE11以上和其它较新的非IE的现代浏览器Chrome/Firefox/Opera...有效. 克隆或创建一个新的文件输入元素进

ORACLE 中NUMBER 类型 低精度转换成高精度

例如: 表User中有一个字段 salary  Number(10,3), 如果想把字段salary的类型提高精度到salary  Number(10,6),保留六位小数, 解决办法:1,ALTER TABEL USER MODIFY SALARY NUMBER(13,6); 解释:number类型刚开始是,长度10位,3位小数,如果想增加3位小数,对应的长度也必须增加,否则无法修改.所以NUMBER(13,6);这样就可以提高精度了, ORACLE 中NUMBER 类型 低精度转换成高精度

加法将 number 类型 转换成 string 类型

python也不是没有缺点在性能方面就Java.C++等老前辈还是没得比的,另外python和nodejs一样只能使用CPU单核,也是性能方面影响是因素之一. 发现只有A线程打印了"A",并没有发现B线程和C线程打印字符串:(.难道是A线程更改了Integer对象的值,而B线程和C线程并没有"看到"更新后的值?于是,在线程类的run方法的while循环中增加代码如下 在ABP里,一个应用服务应当实现IApplicationService接口,为每个应用服务创建一个接

HTML5 number类型文本框step属性的验证机制——张鑫旭

我在下一盘很大的棋,本文只是其中的一个棋子. 需要提前知道的: 目前而言,对step雄起的浏览器为IE10+, Chrome以及Opera浏览器. 需要预先知道number类型input的一些基本知识. HTML5 step的验证机制可以应用在不支持的浏览器上. 问题引导,威逼利诱 如下一小段含step属性的HTML代码: <input type="number" step="2.1" min="1" /> 在Chrome浏览器下长相

对于Oracle中Number类型的字段映射成Java中的具体类型的问题

我在Oracle中给一个用户Id字段设置为Number类型,使用JDBC在完成ORM的时候,以为其可以自动转换为Integer,因为我的POJO类id舒心实用的就是Integer.但事实是,我在测试的时候,发现所有的用户id全为null,还在奇怪明明数据库中id是有值的,为什么取不到? 原因在于Oracle的Number类型映射为Java类型中的 java.math.BigDecimal (不可变的.任意精度的有符号十进制数)类型,并不是我简单认为的 Integer ,还会报一个错误: 就是说B

React中,input外边如果包一个div,可以把input的onChange事件绑定到div上面,并且也生效

最近第一次开始学习封装组件,遇到几个比较神奇的问题. 首先就是如果input外边包一个div,如果把input的onChange事件绑定到div上,也会生效 <div onChange={(e)=>{console.log(e.target.value)}}> <Input/> </div> 还有,如果封装了一个组件,那么里面的最外层元素的{...this.props}需要慎用,虽然这样子做,可以把样式传过来,并且生效,但是会报错 原文地址:https://www