【EasyUI篇】NumberBox數值輸入框元件
阿新 • • 發佈：2019-02-19
微信公眾號：
關注可瞭解更多的教程。問題或建議，請公眾號留言;
21.NumberBox數值輸入框元件
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與之前的類似 }); });
效果圖
------------------------------------------------
關注小編微信公眾號獲取更多資源
