【EasyUI篇】NumberBox数值输入框组件-CFANZ编程社区

微信公众号：程序yuan

查看--> 全套EasyUI示例目录

21.NumberBox数值输入框组件

【EasyUI篇】NumberBox数值输入框组件_EasyUI

【EasyUI篇】NumberBox数值输入框组件_EasyUI_02

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>NumberBox</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/NumberBox.js"></script>
    <style rel="stylesheet" type="text/css">
    </style>
    <script>

    </script>
</head>
<body style="padding: 100px;">


    数值输入框：<%--<input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:3">--%>
    <input id="box" type="text">

    <br><br><br><br>
    <button id="btn">点击</button>



</body>
</html>

JS文件

$(function () {



    $('#box').numberbox({
        width:200,
        height:30,
        //设置是否禁用
        // disabled:true,
        // value:121,
        //输入值小于10会自动被10替换
        min:10,
        //输入值小于100会自动被100替换
        max:10000000,
        //小数点的位数
        precision:3,
        //整数与小数的分隔符
        // decimalSeparator:'.',
        //整数的分隔符
        //999-999.000
        // groupSeparator:'-',
        //字符前缀,后缀
        // prefix:'￥',
        // suffix:'H',
        //格式化输入的数字，不可以改变value值，只是格式化
        formatter:function (v) {
            // return "["+v+"]";
            return v;
        },
        //可以控制哪些字符输入不进去
        filter:function (e) {
           /* if(e.key <= 6){
                return true;
            }
            return false;*/
        },
        //可以改变value值
       /* parser:function (s) {
            return Number(s);
        }
        //改变值的时候触发
*/      onChange:function(newValue,oldValue){
            console.log(newValue+"|"+oldValue);
        }

    });

    $("#btn").click(function () {
        //将输入框的值修正为有效的值
        // $('#box').numberbox('fix');//可以使用keyup来检验
        // $('#box').numberbox('setValue','99999');
        // alert($('#box').numberbox('getValue','99999'));
        //options,destroy,reset,clear,enable,disable与之前的类似

    });

});