`

HTML 控制密码框的可见和隐藏

阅读更多

html 中如何控制密码框的隐藏和可见呢?



 




 

js方法:

/***
 * toggle 密码明文
 * @constructor
 */
function ShowHidePW() {

    if (!pwState) {
        pwFixer.changePasswordVisiblity(1, "new_password2");
        pwState = true;
    } else {
        pwFixer.changePasswordVisiblity(0, "new_password2");
        pwState = false;
    }
}

 注意:changePasswordVisiblity的第二个参数是元素的id

changePasswordVisiblity方法如下:
changePasswordVisiblity= function (what, id) {
            what = parseInt(what,10);
            var theEl = document.getElementById(id);

            if (what === 1) { //show
                $(theEl).vendorCss("TextSecurity","none");
            } else {
                $(theEl).vendorCss("TextSecurity","disc");
            }
            if(!$.os.webkit) {
                if(what === 1)
                    theEl.type="text";
                else
                    theEl.type="password";
            }
            theEl = null;
        }

 
 demo地址:http://hbjltv.com/ios_www/www/index.html#user_modify_password_panel

注意:demo必须在手机浏览器中访问

 

  • 大小: 18.9 KB
  • 大小: 20.3 KB
0
0
分享到:
评论

相关推荐

    JS实现密码框的显示密码和隐藏密码功能示例

    `showps()`函数将密码框从`type="password"`变为`type="text"`,使密码可见;`hideps()`则反之,将密码框恢复为隐藏状态。 来看看具体的代码实现: ```html <!-- HTML 部分 --> <span id="box"><input type=...

    JS实现表单中点击小眼睛显示隐藏密码框中的密码

    总结一下,通过结合HTML、CSS和JavaScript,我们可以实现一个用户友好的功能,让用户能够轻松查看或隐藏他们在密码框中输入的内容。这种方法提高了表单的交互性和安全性,因为用户在确认密码后可以立即隐藏它们,...

    Bootstrap用户输入密码显示隐藏代码

    然而,为了给用户提供更多控制,我们通常会添加一个切换按钮,让用户决定是否显示密码。 实现这一功能,我们可以创建一个图标或者文字作为切换按钮,使用Bootstrap的类如`.btn`、`.btn-default`、`.glyphicon-eye-...

    编程开发-综合控件-网页密码框显示隐藏密码(JQUERY) 免费版.zip

    "编程开发-综合控件-网页密码框显示隐藏密码(JQUERY) 免费版.zip" 是一个针对这一需求的解决方案,它利用jQuery库来实现一个功能丰富的密码输入框,允许用户在需要时切换显示或隐藏密码,同时保持了良好的交互体验。...

    bootstrap+vueJS+HTML5表单中password输入的显示与隐藏

    这通常涉及到用户密码的安全性和交互性,允许用户在输入密码时切换显示状态,例如从隐藏的星号到可见的明文。 **HTML5的`<input type="password">`** 在HTML5中,`<input>`标签提供了多种类型,其中`type="password...

    js实现input密码框显示/隐藏功能

    总结来说,通过上述知识点的介绍和示例代码的解析,可以了解到实现密码框显示和隐藏功能的基本原理和技术实现方法。这不仅是一个基础功能的实现,而且涉及到前端开发中的HTML、CSS和JavaScript技术的综合运用,同时...

    jQuery密码显示隐藏登录表单

    - 可以添加CSS样式以提供视觉反馈,例如,当密码可见时,按钮背景色改变。 7. **安全性考量** - 虽然这个功能提高了用户交互性,但不应忽视安全问题。在实际应用中,密码在客户端显示可能导致窃窥,应确保服务器...

    js实现密码隐藏及显示

    Bootstrap-show-password.js是一个基于JavaScript的插件,它允许用户轻松地切换输入框中的密码可见状态,从而提高交互性。下面我们将详细探讨如何使用这个插件以及其背后的原理。 首先,Bootstrap-show-password.js...

    Bootstrap显示或隐藏密码jquery插件

    而这款jQuery插件则是对Bootstrap功能的一种扩展,它在密码输入框中添加了一个切换按钮,允许用户在输入密码时选择显示或隐藏密码字符,增加了用户的交互性和安全性。 jQuery库是这个插件的核心,它是一个轻量级的...

    输入框密码显示隐藏代码

    7. **辅助功能**:为了提高无障碍性,确保切换密码可见性的功能也能通过屏幕阅读器访问,可以添加ARIA属性,如`aria-label`和`aria-controls`。 8. **最佳实践**:遵循Web开发的最佳实践,如使用语义化标签、遵循W3...

    密码框效果.zip

    2. **切换显示/隐藏密码**:为了实现在密码框中切换显示密码的效果,开发者通常会添加一个切换按钮或复选框。当用户点击此元素时,`type`属性会从`password`变为`text`,反之亦然。这可以通过JavaScript实现,例如:...

    html5仿支付宝密码框的实现代码

    HTML5仿支付宝密码框的实现涉及到HTML5、CSS3的布局和样式设置、JavaScript的交互逻辑以及前端安全性考虑。下面将详细阐述这部分内容。 ### HTML5 HTML5是最新一代的超文本标记语言(HyperText Markup Language)...

    js实现input密码显示隐藏

    这个功能允许用户切换输入框中的密码可见性,以方便核对输入是否正确,同时确保数据安全。以下是一些关于如何实现这一功能的关键知识点: 1. **HTML元素**: - `input` 元素:用于创建用户输入字段,尤其是`type=...

    jQuery隐藏显示密码插件.zip

    在网页开发中,用户在输入密码时,为了保护信息安全,通常会使用隐藏显示密码的功能。这个功能允许用户在输入密码时切换视图,以便检查他们输入的字符是否正确。"jQuery隐藏显示密码插件.zip" 提供了一款名为 ...

    计算机软件-商业源码-36 取得密码框中的内容.zip

    密码框通常有可见字符数限制,以及显示/隐藏密码的功能,以方便用户确认输入。开发者需要确保这些功能的实现。 6. 事件处理:在UI交互中,可能需要监听密码框的`onChange`或`onKeyPress`等事件,以便在用户输入时...

    jQuery控制输入框显示或者隐藏密码.zip

    本资源“jQuery控制输入框显示或者隐藏密码.zip”提供了一个实用的功能,即通过jQuery来切换文本输入框(通常是密码输入框)的可见性,允许用户在明文和密文模式之间切换,提升用户体验。以下将详细讲解实现这一功能...

    可显示隐藏密码切换的jQuery插件.zip

    当复选框被选中时,我们将`type`属性从`password`改为`text`,使得密码可见;当复选框未被选中时,将其改回`password`,恢复密码的遮蔽状态。这样的切换不仅提供了用户友好的交互,而且保持了原有的安全性,因为密码...

    防止浏览器记住用户名及密码的简单实用方法

    在用户名输入框和密码输入框之间添加一个不可见的`type="text"`输入框,可以干扰浏览器识别用户名,从而防止记住密码。 请注意,不同的浏览器可能有不同的行为,因此可能需要结合多种方法来达到最佳效果。同时,...

    jQuery显示隐藏和复制表单密码字段插件

    本篇文章将详细讲解一个特定的jQuery插件——用于显示、隐藏和复制表单中密码字段的插件。 首先,表单中的密码字段通常以星号或圆点显示,以保护用户的隐私。然而,在某些情况下,用户可能需要查看或复制他们输入的...

    jQuery隐藏式登录框窗口.zip

    在这个项目中,"隐藏式登录框窗口"的设计思路是:默认情况下,登录框是不可见的,只有当用户点击某个特定按钮或者链接时,登录框才会从页面的某个角落滑出,用户完成登录操作后,登录框会再次隐藏。这种设计可以避免...

Global site tag (gtag.js) - Google Analytics