js修改input的type属性有些限制。当input元素还未插入文档流之前，是可以修改它的值的，在ie和ff下都没问题。但如果input已经存在于页面，其type属性在ie下就成了只读属性了，不可以修改。在ff下仍是可读写属性。

今天遇到个问题，输入框有默认值“密码”，但获得焦点时，“密码”两字会去掉，输入时直接变成”****“的password类型。很明显，一开始的时候，input的类型是text，后来变成了password类型。直观的思路是用js修改input的type类型。但ie下这么做不可行，所以只能换个思路，写两个input，一个text类型，一个password类型，分得监听onfocus和onblur事件。如下：

注意：script那段代码要写到html里面

==================================================


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<html>


<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>阿当制作</title>


</head>


<style type="text/css">

</style>


<body>


<input name="" type="text" value="密码" class="inputText_1" id="tx" style="width:100px;"  />


<input name="" type="password" style="display:none;width:100px;" id="pwd" />


<script type="text/javascript">


var tx = document.getElementById("tx"), pwd = document.getElementById("pwd");


tx.onfocus = function(){


if(this.value != "密码") return;


this.style.display = "none";


pwd.style.display = "";


pwd.value = "";


pwd.focus();


}


pwd.onblur = function(){


if(this.value != "") return;


this.style.display = "none";


tx.style.display = "";


tx.value = "密码";


}


</script>


</body>


</html>

js修改input的type属性问题的更多相关文章

  1. js修改input的type属性问题（兼容所有浏览器，主要用于密码类的默认有提示文字的效果）

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. ie8下修改input的type属性报错

    摘要: 现在有一个需求如图所示,当用户勾选显示明文复选框时,要以明文显示用户输入的密码,去掉勾选时要变回密文,刚开始想到的就是修改输入框的type来决定显示明文还是密文,使用jQuery的attr来做 ...

  3. 修改input的type属性

    在ff和chrome中是可以直接修改input的type属性的,但是在ie下面是不允许的. 用jquery 的attr方法去修改,在jquery1.8.3版本会直接抛出异常,但在1.9及以上版本就不再 ...

  4. JQuery中如何动态修改input的type属性

    代码如下: jQuery(".member_id").focus(function() { jQuery(this).val(''); }).blur(function() { i ...

  5. JQ无法修改input的type属性的替代解决方法

    需要实现的效果:一个输入框,当输入框未获得焦点的时候,显示为 “请输入密码”:当输入内容并失去焦点的时候,输入内容显示为”*****”,如果没有输入仍然显示“请输入密码”: 方法一:使用text,隐藏 ...

  6. selenium web driver 使用JS修改input属性

    selenium获取input时候,发现type=”hidden” 的input无法修改value,经牛人指点,可以使用js修改 首先html源文件如下,设置为text .hidden.submit ...

  7. [Liferay6.2.2]AUI的小坑：input的type属性

    <aui:input name="name" label="姓名" value="<%=student.getName() %>&q ...

  8. html5 input的type属性启动数字输入法

    html5 input的type属性启动数字输入法   当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出 启动数字 ...

  9. input的type属性

    input的type属性:http://www.w3school.com.cn/tags/att_input_type.asp 基本语法: <input type="hidden&qu ...

随机推荐

  1. java super 隐式参数

    第41集 所有构造器里,第一句话就是super()           (隐式的,系统自动执行) 鸟构造器调用动物构造器,动物构造器调用object构造器. (系统默认的) tostring() 方法 ...

  2. [转贴]使用CryptoAPI解析X509证书和P12证书

    原文在 http://bbs.pediy.com/archive/index.php?t-97663.html,但是觉得这篇文章非常好,我抄下来作我笔记用 一.解析X509证书 1.从磁盘上的证书文件 ...

  3. 页面上动态编译及执行java代码

    本文地址:http://www.cnblogs.com/liaoyu/p/real-time-compile-and-run-java-code-web-app.html 最近看到同事在页面上编译和执 ...

  4. PHP奇趣笔试试题一则

    $a = 3; $b = 5; if($a = 5 || $b = 7){ $a++; $b++; } echo $a, ' ', $b; 输出结果为: A.6 8 B.6 6 C.2 6 D.1 6 ...

  5. Android 内核初识(5)Zygote进程

    简介 Zygote本身是一个Native的应用程序,和驱动.内核等均无关系.Zygote是由init进程根据init.rc文件中的配置项而创建的. zygote最初的名字叫“app_process”, ...

  6. wzplayer V1.6正式版(无限制)不支持加密版本 2014-07-08

    2014-07-08 修复部分视频倾斜问题,同时给受影响的客户给予更新. wzplayer V1.6正式版(无限制)不支持加密版本 发布于官方,下载地址wzplayer V1.6正式版(无限制)不支持 ...

  7. C# DataGridView添加新行的2个方法

    可以静态绑定数据源,这样就自动为DataGridView控件添加 相应的行.假如需要动态为DataGridView控件添加新行,方法有很多种,下面简单介绍如何为DataGridView控件动态添加新行 ...

  8. BZOJ_1607_ [Usaco2008_Dec]_Patting_Heads_轻拍牛头_(筛数)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1607 给出一组n个数,求每个数能被多少个其他的数整除. 分析 暴力一点的做法就是每个数去筛它的 ...

  9. oracle rac scan ip 用途 原理

    Oracle 11G R2 RAC增加了scan ip功能,在11.2之前,client链接数据库的时候要用vip,假如你的cluster有4个节点,那么客户端的tnsnames.ora中就对应有四个 ...

  10. jQuery on()方法绑定动态元素的点击事件

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...