EasyUI jQuery maskedBox Widget

Last Updated : 18 Apr, 2022

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 masked box using jQuery EasyUI. The masked box enforces its structure as the user types.

Downloads for EasyUI for jQuery:

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

Syntax:

<input class="easyui-maskedbox">

Properties:

mask: A string representing the current mask.
promptChar: The character used to prompt the user for input.
masks: The mask rule definition.

Methods:

options: It returns the options object.
initValue: Initialize the value without triggering the onChange event.
setValue: It sets the component value.

Approach:

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

<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>

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>  
  
    <script type="text/javascript">  
      $(document).ready(function (){  
          $('#gfg').maskedbox({});  
      });  
    </script>  
</head>  
  
<body> 
  
    <h1>GeeksforGeeks</h1> 
    <h3>EasyUI jQuery maskedbox widget</h3> 
  
  Maskbox number : <input id="gfg" class="easyui-maskedbox" mask="999 999 999 999 999"> 
</select> 
</body> 
</html> 