jQuery制作input提示内容(兼容IE8以上)
深入了解jQuery制作input提示内容,兼容IE8及以上版本
在HTML5中,input新属性placeholder为我们提供了极大的便利,对于不支持低版本IE浏览器的用户,我们需要借助脚本来实现类似的功能。今天,我将为大家详细介绍如何使用jQuery制作input提示内容。
创建一个HTML input元素。例如:
```html
```
接着,引入相应的js库,并使用jQuery进行操作。代码如下:
```html
$("put").on({
focus: function() {
if (this.value == this.defaultValue) {
this.value="";
}
},
blur: function() {
if (this.value == "") {
this.value = this.defaultValue;
}
}
});
```
如果你需要实现密码输入框的提示功能,可以采用两个input元素的方式。一个设置为text类型并默认显示,另一个设置为password类型并默认隐藏。当text输入框获取焦点时,隐藏password输入框并显示text输入框;当失去焦点且未输入内容时,显示text输入框并隐藏password输入框。以下是示例代码:
```html
$('.show').on('focus', function(){
var text_value = $(this).val();
if (text_value == this.defaultValue) {
$(this).hide();
$(this).next('input.log_paw').show().focus();
}
});
$('input.log_paw').on('blur', function() {
var text_value = $(this).val();
if (text_value == '') {
$(this).prev('.show').show();
$(this).hide();
}
});
```
以上就是使用jQuery制作input提示内容的详细方法,希望能帮助到你。同时也希望大家多多支持狼蚁SEO。
编程语言
- jQuery制作input提示内容(兼容IE8以上)
- ASP.NET中Session和Cache的区别总结
- 关于foreach循环中遇到的问题小结
- Vue中的Vux配置指南
- vue中element组件样式修改无效的解决方法
- vue项目优化之通过keep-alive数据缓存的方法
- jquery根据一个值来选中select下的option实例代码
- PHP编程之设置apache虚拟目录
- PHP实现针对日期,月数,天数,周数,小时,分,秒等的
- node.js利用redis数据库缓存数据的方法
- JS实现鼠标点击展开或隐藏表格行的方法
- JS失效 提示HTML1114- (UNICODE 字节顺序标记)的代码页
- 浅谈javascript面向对象程序设计
- JSP取得在WEB.XML中定义的参数
- 解决angularjs中同步执行http请求的方法
- yii实现model添加默认值的方法(2种方法)