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. HDU 2985 Another lottery（坑题）

    点我看题目 题意 : 有n个人,每个人可以玩m轮,每一轮中每个参与者都有cj张票,第 i 轮的奖金是2的i次方,问你每个人所能赢得最多的奖金的概率是多少. 思路 : 这个题比较坑啊,其实不用去算前几轮 ...

  2. Notification 多次传递参数 一直都是旧的 解决

    参考 :http://blog.163.com/caoguoqiang_dlut/blog/static/10658914220114167219320/ 问题描述: 在service中获取到数据,通 ...

  3. Java实现查看当前目录下的文件

    package com.tfj.file; import java.io.File; import java.util.ArrayList; /** * @author JackSile E-mail ...

  4. CentOS5.5 下编译安装 LAMP

    大纲 1.安装gcc编译器 2.卸载rpm安装的http和mysql软件 3.编译安装php依赖包 4.安装apache软件 5.安装mysql软件 6.安装php软件 7.安装memcache ph ...

  5. BZOJ_1617_[Usaco2008_Mar]_River_Crossing_渡河问题_(动态规划)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1617 FJ要把\(n\)头奶牛用船运到河对岸.FJ自己在船上要用\(m\)时间,如果运送\(i ...

  6. 【转】iTunes下载速度太慢？两招帮你提速！-- 不错

    原文网址:http://bbs.app111.com/thread-275-1-1.html 不用说,很多朋友都发现在大陆,下载 iTunes 上的东西实在是慢如蜗牛,小一点的软件还能坚持一下,大一点 ...

  7. .Net 垃圾回收机制原理（一）

    英文原文:Jeffrey Richter 编译:赵玉开 链接:http://www.cnblogs.com/yukaizhao/archive/2011/11/23/dot_net_GC_1.html ...

  8. BrnShop开源网上商城第六讲：扩展视图功能

    在正式讲解扩展视图功能以前,我们有必要把视图的工作原理简单说明下.任何一个视图都会被翻译成一个c#类,并保存到指定的位置,然后被编译.这也就是为什么能在视图中包含c#代码片段的原因.下面我们通过一个项 ...

  9. 转载--配置WAMP开发环境

    转自:http://www.cnblogs.com/cardon/archive/2009/12/13/1622935.html 本例安装文件在这里下载       apache2.2.4 MySQL ...

  10. HDU-1896 Stones

    http://acm.hdu.edu.cn/showproblem.php?pid=1896 题意:一个人从0开始走起,遇到偶数个石头就踢.要是同一位置有多个石头,则先扔最重的石头(也就是扔的最近的那 ...