JQ无法修改input的type属性的替代解决方法
需要实现的效果:一个输入框,当输入框未获得焦点的时候,显示为 “请输入密码”;当输入内容并失去焦点的时候,输入内容显示为”*****”,如果没有输入仍然显示“请输入密码”;
方法一:使用text,隐藏域中,然后配合onkeypress、onkeyup、focus、blur等事件基本可以达到要求,此种方法比较麻烦;
方法二:用text和password一起
html:
<input type="password" id="input_password" class="m_input_se1 leftd" value='' style="display:none;color:#444;"/>
<input type="text" id="showPwd" class="m_input_se1 leftd" value="请输入密码" style="color:#c0c0c0"/>
js:
$("#showPwd").focus(function() {
var text_value = $(this).val();
if (text_value == "请输入密码") {
$("#showPwd").hide();
$("#input_password").show().focus();
}
});
$("#input_password").blur(function() {
var text_value = $(this).val();
if (text_value == "") {
$("#showPwd").show();
$("#input_password").hide();
}
});
至此完美解决,所有浏览器都可以使用。
扩展内容:
本来想使用JQ的attr修改type属性值,但是发现在IE上会出错,如下: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” );
}
没办法,IE不支持修改type属性。
JQ无法修改input的type属性的替代解决方法的更多相关文章
- 修改input的type属性
在ff和chrome中是可以直接修改input的type属性的,但是在ie下面是不允许的. 用jquery 的attr方法去修改,在jquery1.8.3版本会直接抛出异常,但在1.9及以上版本就不再 ...
- js修改input的type属性问题
js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以 ...
- JQuery中如何动态修改input的type属性
代码如下: jQuery(".member_id").focus(function() { jQuery(this).val(''); }).blur(function() { i ...
- ie8下修改input的type属性报错
摘要: 现在有一个需求如图所示,当用户勾选显示明文复选框时,要以明文显示用户输入的密码,去掉勾选时要变回密文,刚开始想到的就是修改输入框的type来决定显示明文还是密文,使用jQuery的attr来做 ...
- js修改input的type属性问题(兼容所有浏览器,主要用于密码类的默认有提示文字的效果)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- [Liferay6.2.2]AUI的小坑:input的type属性
<aui:input name="name" label="姓名" value="<%=student.getName() %>&q ...
- html5 input的type属性启动数字输入法
html5 input的type属性启动数字输入法 当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出 启动数字 ...
- input的type属性
input的type属性:http://www.w3school.com.cn/tags/att_input_type.asp 基本语法: <input type="hidden&qu ...
- 在vuejs 中使用axios不能获取属性data的解决方法
Laravel5.4 vuejs和axios使用钩子mounted不能获取属性data的解决方法 //出错问题:在then 这个里边的赋值方法this.followed = response.data ...
随机推荐
- 防止程序启动两次的方法CreateMutex()
在工程文件中, WinMain函数里加上以下代码 HANDLE hMutex = CreateMutex(NULL, false, "Process"); if (GetLastE ...
- 去掉input【type=number】默认的上下箭头
input::-webkit-inner-spin-button {-webkit-appearance: none;}input::-webkit-outer-spin-button {-webki ...
- spring-data-solr官方学习文档介绍
spring-data-solr文档介绍如下: 通过http://www.springframework.org/schema/data/solr/spring-solr-1.0.xsd(spring ...
- php和java静态变量用途的思考
静态变量有哪些用途? 比如创建单例对象. 统计访问次数.数量等等. 多线路和进程中可能会使用. 深入理解补充.... PHP 单例模式解析和实战 php设计模式——单例模式 php static 与 ...
- SQL SERVER 查询特定的前几条数据
1. 使用MS SQL Server 2008: 2. 数据库内容如下: insert into xuexi1 values('张三0', '数学', 98 ) insert into xuexi1 ...
- libthrift0.9.0解析(一)之TServer
TServer 属性serverTransport 为TServerTransport类型,类图如下: 构造函数,简单根据args设置几个成员,大部分是工厂类: protected TServer(A ...
- pod install后出现: [!] `<PBXResourcesBuildPhase UUID=`xxxx`>` attempted to initialize an object with an unknown UUID
[!] `<PBXResourcesBuildPhase UUID=`xxx`>` attempted to initialize an object with an unknown UU ...
- 25 读取jar包内log4j.properties文件方法
//读取log4j日志配置文件 InputStream inputStream=ApplicationExecutor.class.getResourceAsStream("/log4j_h ...
- 你好,C++(13)这道单选题的答案是A、B、C还是D?3.7 枚举类型
3.7 枚举类型 除了之前我们介绍的数值数据和文字数据之外,在现实世界中,常常还会遇到这样一类数据:一道单选题的答案只能是A.B.C.D四个选项中的某一个:红绿灯的颜色只能是红色,绿色和黄色中的某一 ...
- vs2008下使用libcurl
网上找了半天,总算找到一个比较好用的C++ 网络库,老实说,完全用Socket操作网络对于需要开发网络应用程序的人员来说还是很蛋疼很繁琐的.好在有这么一个给力的库.这个库的介绍可以自己百度一下,就我所 ...