EasyUI jQuery numberbox Widget

EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

In this article, we will learn how to design a numberbox using jQuery EasyUI. The numberbox allows the user to add numeric value in a box.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Syntax:

<input class="easyui-numberbox">

Properties:

disabled: Defines if to disable the field.
value: The default value.
min: The minimum allowed value.
max: The maximum allowed value.
precision: The maximum precision to display after the decimal separator.
decimalSeparator: The decimal character separates the integer and decimal parts of a number. .
groupSeparator: The character that separates integer groups to show thousands and millions.
prefix: The prefix string.
suffix: The suffix string.
filter: Defines how to filter the key pressed.
formatter: A function to format the numberbox value.
parser: A function to parse a string.

Methods:

options: Return the numberbox options.
destroy: Destroy the numberbox object.
disable: Disable the field.
enable: Enable the field.
fix: Fix the value to valid value.
setValue: Set numberbox value.
getValue: Get numberbox value.
clear: Clear numberbox value.
reset: Reset numberbox value.

Events:

onChange: Fires when the field value is changed.

Approach: First, add jQuery Easy UI scripts needed for your project.

<script type="text/javascript" src="jquery.min.js"> </script>  <script type="text/javascript" src="jquery.easyui.min.js"> </script>  <script type="text/javascript" src="jquery.easyui.mobile.js"> </script>

Example:

HTML

<!doctype html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="initial-scale=1.0, 
        maximum-scale=1.0, user-scalable=no"> 
            
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
        href="themes/metro/easyui.css"> 

    <link rel="stylesheet" type="text/css"
        href="themes/mobile.css"> 

    <link rel="stylesheet" type="text/css"
        href="themes/icon.css"> 

    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js"> 
    </script> 

    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
        src="jquery.easyui.min.js"> 
    </script> 
    
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
        src="jquery.easyui.mobile.js"> 
    </script> 

    <h1>GeeksforGeeks</h1>
    <h3>how to make a basic numberbox using jQuery UI?</h3>
</head> 

<body>
     <input class="easyui-numberbox" 
            value="123" label="Number:" >
</body>
</html>

Output:

Reference: http://www.jeasyui.com/documentation/

EasyUI jQuery numberbox Widget

Events:

Explore