没有合适的资源?快使用搜索试试~ 我知道了~
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
0 下载量 198 浏览量
2020-12-10
10:39:53
上传
评论
收藏 48KB PDF 举报
温馨提示
试读
3页
页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" placeholder="请输入用户名" value="" id="username"/> 最多加点样式控制下默认文字的颜色 input::-webkit-input-placeholder{color:#AAAAAA;} 但是在低版本的浏览器却不支持这个placeholder属性,那么真的要在低版本浏览器也要实现跟placeholder一样的效果,就需要写个插件来兼容下,下面就细讲一下怎样用jquery来实现这个模拟效果。 实现这个模拟效果,
资源详情
资源评论
资源推荐
jQuery封装封装placeholder效果实现方法效果实现方法,让低版本浏览器支持该让低版本浏览器支持该
效果效果
页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即:
<input type="text" name="username" placeholder="请输入用户名" value="" id="username"/>
最多加点样式控制下默认文字的颜色
input::-webkit-input-placeholder{color:#AAAAAA;}
但是在低版本的浏览器却不支持这个placeholder属性,那么真的要在低版本浏览器也要实现跟placeholder一样的效果,就需
要写个插件来兼容下,下面就细讲一下怎样用jquery来实现这个模拟效果。
实现这个模拟效果,页面的一般调用方式:
$('input').placeholder();
首先,先写jquery插件的一般结构:
;(function($){
$.fn.placeholder = function(){
//实现placeholder的代码
}
})(jQuery)
下面我们就要判断浏览器是否支持placeholder属性。
;(function($){
$.fn.placeholder = function(){
this.each(function(){
var _this = this;
var supportPlaceholder = 'placeholder' in document.createElement('input');
if(!supportPlaceholder){
//不支持placeholder属性的操作
}
});
}
})(jQuery)
我们要支持链式操作,如下:
;(function($){
$.fn.placeholder = function(){
return this.each(function(){
var _this = this;
var supportPlaceholder = 'placeholder' in document.createElement('input');
if(!supportPlaceholder){
//不支持placeholder属性的操作
}
});
}
})(jQuery)
默认配置项:
options = $.extend({
placeholderColor:'#aaaaaa',
isSpan:false, //是否使用插入span标签模拟placeholder的方式,默认是不需要
onInput:true //实时监听输入框
},options);
weixin_38513665
- 粉丝: 5
- 资源: 936
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0