两种方法基于jQuery实现IE浏览器兼容placeholder效果( 二 ) _云知道

当用户键盘按键且输入框为空( 删除字符 )时，加载背景图。
此方法的缺点是：需要为每一个提示文字不同的input制作背景图片，并且设置input的样式。
HTML代码不变。
CSS：
.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}JS：
$(function(){//判断浏览器是否支持placeholder属性supportPlaceholder=’placeholder’ in document.createElement(’input’);if(!supportPlaceholder){//初始状态添加背景图片$("#uname").attr("class","phbg");//初始状态获得焦点$("#uname").focus;function destyle(){if($("#uname").val() != ""){$("#uname").removeClass("phbg");}else{$("#uname").attr("class","phbg");}}//当输入框为空时，添加背景图片；有值时去掉背景图片destyle();$("#uname").keyup(function(){//当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片destyle();});$("#uname").keydown(function(){//keydown事件可以在按键按下的第一时间去掉背景图片$("#uname").removeClass("phbg");});}});此方法至此结束。
此方法在IETester的IE8下显示效果：
获得焦点时：

失去焦点时：

有输入时：

【两种方法基于jQuery实现IE浏览器兼容placeholder效果】如果有朋友有更好的方法，欢迎交流讨论。
您可能感兴趣的文章:使用jQuery快速解决input中placeholder值在ie中无法支持的问题IE下支持文本框和密码框placeholder效果的JQuery插件分享基于jQuery的让非HTML5浏览器支持placeholder属性的代码jQuery实现的一个自定义Placeholder属性插件jQuery实现的placeholder效果完整实例jQuery插件EnPlaceholder实现输入框提示文字jQuery实现HTML5 placeholder效果实例jquery实现（textarea）placeholder自动换行jquery 判断是否支持Placeholder属性的方法jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果jQuery实现IE输入框完成placeholder标签功能的方法

两种方法基于jQuery实现IE浏览器兼容placeholder效果( 二 )

推荐阅读

中医的七情是什么

ai制作分层次渐变背景矢量图的操作流程

约会大作战圣诞活动内容介绍五河琴里圣诞皮肤上线

梦见死去的爸爸是什么意思

鸡蛋饼正宗做法窍门家常鸡蛋饼怎么做

黄金首饰在哪个平台买比较好买黄金饰品在哪个平台买最好

阳台种韭菜有妙招怎么处理让韭菜长得更好

如何鉴别鲫鱼分享它的六个特点

qq可疑申请是什么意思啊 qq可疑申请是什么意思

四旬是多大四旬指多大年龄

moto x屏幕显示效果怎么样,p50手机屏幕怎么样

液晶电视质量排名前十名,国产液晶电视销量排名前十名

小米手环4nfc怎么刷公交小米手环4nfc刷公交的方法

比伯与妻子海莉秀恩爱贾斯汀比伯现女友

小腿肌肉怎么在家练

马桶最下面的污垢怎么去除