EasyUI jQuery passwordBox widget

EasyUI jQuery passwordBox widget

EasyUI是一个HTML5框架,用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能,为开发者节省大量时间。

在这篇文章中,我们将学习如何使用jQuery EasyUI设计一个密码箱。密码箱允许用户输入密码。密码箱通过显示点来保护你的密码,而不是密码文本。当你想检查你的密码时,只需点击眼睛按钮即可

EasyUI for jQuery的下载:

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

语法:

<input class="easyui-passwordbox">

属性:

  • passwordChar。要在文本框上显示的密码字符。
  • checkInterval。检查的间隔时间。
  • lastDelay:将最后输入的字符转换为密码字符的延迟时间。
  • revealed。定义是否揭示隐藏的密码。
  • showEye。定义是否显示眼睛图标。

方法:

  • options。返回选项对象。
  • showPassword:显示真实的密码。
  • hidePassword: 隐藏真实密码。

CDN链接:首先,添加你的项目需要的jQuery Easy UI脚本,链接是本地路径。

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

示例:

<!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').passwordbox({
          showEye: false
        });
      });
    </script>
</head>
 
<body>
 
    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery passwordbox widget</h3>
    <p>Password :
         <input id="gfg" class="easyui-passwordbox">
    </p>
 
</body>
</html>

输出:

EasyUI jQuery passwordBox widget

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程