您的位置：首页 > 编程技术 > js  >  js修改input的type属性问题探讨

js修改input的type属性问题探讨

 更新时间：2013年10月19日 09:24  点击：3619

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>

[!--infotagslink--]

相关文章

  • 浅谈C# 字段和属性

    这篇文章主要介绍了C# 字段和属性的的相关资料，文中示例代码非常详细，供大家参考和学习，感兴趣的朋友可以了解下...2020-11-03

  • PHP传值到不同页面的三种常见方式及php和html之间传值问题

    在项目开发中经常见到不同页面之间传值在web工作中，本篇文章给大家列出了三种常见的方式。接触PHP也有几个月了，本文总结一下这段日子中，在编程过程里常用的3种不同页面传值方法，希望可以给大家参考。有什么意见也希望大...2015-11-24

  • js修改input的type属性问题探讨

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

  • Mysql常见问题集锦

    1，utf8_bin跟utf8_general_ci的区别 ci是 case insensitive, 即 "大小写不敏感", a 和 A 会在字符判断中会被当做一样的; bin 是二进制, a 和 A 会别区别对待. 例如你运行: SELECT * FROM table WHERE txt = 'a'...2013-10-04

  • Mysql大小写敏感的问题

    一、1 CREATE TABLE NAME(name VARCHAR(10)); 对这个表，缺省情况下，下面两个查询的结果是一样的：复制代码 代码如下: SELECT * FROM TABLE NAME WHERE name='clip'; SELECT * FROM TABLE NAME WH...2015-03-15

  • linux mint 下mysql中文支持问题

    一.mysql默认不支持中文,它的server和db默认是latin1编码.所以我们要将其改变为utf-8编码,因为utf-8包含了地球上大部分语言的二进制编码 1.关闭mysql服务 sudo /etc/init.d/mysql stop 2.修改mysql配置文件 mysql配...2015-10-21

  • c# 对CSV文件操作（写入、读取、修改）

    这篇文章主要介绍了c# 如何对CSV文件操作，帮助大家更好的理解和学习C#,感兴趣的朋友可以了解下...2020-11-03

  • Vue之计算属性详解

    这篇文章主要为大家介绍了Vue的计算属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助...2021-11-16

  • JS双击变input框批量修改内容

    这篇文章主要介绍了JS双击变input框批量修改内容的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2017-01-09

  • 使用phpMyAdmin批量修改Mysql数据表前缀的方法

    多个网站共用一个Mysql数据库时，为使数据库管理不混乱，一般采用不同的网站使用不同前缀名的方式进行区分。而如何批量修改已有数据库的前缀名呢？全部导出修改后再导入？还是一个表一个表的修改？今天我要介绍的是相对简单的...2015-10-21

  • C# Dynamic关键字之:调用属性、方法、字段的实现方法

    本篇文章是对C#中调用属性、方法、字段的实现方法进行了详细的分析介绍，需要的朋友参考下...2020-06-25

  • C#设置自定义文件图标实现双击启动(修改注册表)

    这篇文章介绍的是利用C#设置自定义文件图标，然后实现双击启动的功能，文章给出了示例代码，介绍的很详细，有需要的可以参考借鉴。...2020-06-25

  • 利用C#修改Windows操作系统时间

    这篇文章主要介绍了利用C#修改Windows操作系统时间，帮助大家更好的利用c#操作系统，感兴趣的朋友可以了解下...2020-12-08

  • 关于vue属性使用和不使用冒号的区别说明

    这篇文章主要介绍了关于vue属性使用和不使用冒号的区别说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-22

  • 详解jquery方法属性

    这篇文章主要介绍了jquery的方法属性,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2021-11-10

  • C#使用队列(Queue)解决简单的并发问题

    这篇文章主要介绍了使用队列(Queue)解决简单的并发问题，讲解的很细致，喜欢的朋友们可以了解一下...2020-06-25

  • mysql修改表结构方法实例详解

    本文实例讲述了mysql修改表结构方法。分享给大家供大家参考。具体如下：mysql修改表结构使用ALTER TABLE语句，下面就为您详细介绍mysql修改表结构的语句写法，希望对您学习mysql修改表结构方面能有所帮助。ALTER [IGNORE]...2015-10-21

  • C#实现appSettings节点读取与修改的方法

    这篇文章主要介绍了C#实现appSettings节点读取与修改的方法,是非常实用的技巧,需要的朋友可以参考下...2020-06-25

  • C# 列表List的常用属性和方法介绍

    这篇文章主要介绍了C# 列表List的常用属性和方法介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-12

  • 在Vue中获取自定义属性方法:data-id的实例

    这篇文章主要介绍了在Vue中获取自定义属性方法:data-id的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09