zoukankan      html  css  js  c++  java
  • 更改 input type 的值

    需要实现的效果:一个输入框,当输入框未获得焦点的时候,value 值为 “密码”;当输入框失去焦点的时候,输入内容显示为”*****”

    <input name=”password” type=”text” id=”showPwd” tabindex=”2″ class=”input” value=”密码” />

    我们很直接会想到下面的js

    $(“#showPwd”).focus(function(){
    $(this).attr(‘type','password');
    });

    发现并没有实现预期效果,出现 uncaught exception type property can't be changed 错误,查看jQuery 1.42源码 1488 行

    // We can't allow the type property to be changed (since it causes problems in IE)
    if ( name === “type” && rtype.test( elem.nodeName ) && elem.parentNode ) {
    jQuery.error( “type property can't be changed” );
    }

    jQuery 修改不了用源生的JS呢?

    $(“#pwd”).focus(function(){
    $(“#pwd”)[0].type = ‘password';
    $(“#pwd”).val(“”);
    });

    发现在FF下可以修改并将密码输入框type 修改为 “password” 并将 value设置为空,而IE下却提示无法得到type属性,不支持该命令。 弹出 type 看看真的无法得到吗?

    $(“#showPwd”).focus(function(){
    alert($(“#showPwd”)[0].type);
    $(“#showPwd”)[0].type = ‘password';
    $(“#showPwd”).val(“”);
    });

    发现弹出text ,原来不是无法得到,只是IE下不能修改。 因此,我们想到可以先remove然后再生成一个type是password的密码输入框。

    下面type为password的输入框

    <input name=”password” type=”password” id=”password” class=”input” style=”display: none;” />

    $(“#showPwd”).focus(function() {
    var text_value = $(this).val();
    if (text_value == this.defaultValue) {
    $(“#showPwd”).hide();
    $(“#password”).show().focus();
    }
    });
    $(“#password”).blur(function() {
    var text_value = $(this).val();
    if (text_value == “”) {
    $(“#showPwd”).show();
    $(“#password”).hide();
    }
    });

    最终效果: 当输入框获得焦点的时,输入的内容显示为“****”;当失去焦点的时,内容为空时显示“密码”。

  • 相关阅读:
    C++初识
    实现小程序iphonex与iphone6底部适配
    vue-element实现外部独立全选
    flex中图片元素被挤压问题
    vue+element-Ui实现简单的表单必填项验证(1)
    Vuex——项目应用(1)
    Vue项目小应用
    transtion过渡
    axios的高阶用法
    阿里云服务器初步使用介绍
  • 原文地址:https://www.cnblogs.com/xuan52rock/p/5033781.html
Copyright © 2011-2022 走看看