欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

jQuery实现placeholder跨浏览器兼容问题的方法

发布于 2012-09-14  

jquery教程

html5针对文本框有个非常棒的属性placeholder,在Chrome 和 Firefox浏览器中可以很完美的看到效果,但唯独IE无法看到效果,这里我们将使用jquery来实现让IE也支持placeholder属性,比较传统的做法就是但没有输入值时我们显示默认的内容 获取焦点时清空文本框的内容,大家可以直接复制以下代码到页面中不需要做任何修改就可以实现这种效果了

$(document).ready(function(){var doc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'in doc.createElement('input'),placeholder=function(input){var text=input.getAttribute('placeholder'),defaultValue=input.defaultValue;if(defaultValue==''){input.value=text}input.onfocus=function(){if(input.value===text){this.value=''}};input.onblur=function(){if(input.value===''){this.value=text}}};if(!supportPlaceholder){for(var i=0,len=inputs.length;i<len;i++){var input=inputs[i],text=input.getAttribute('placeholder');if(input.type==='text'&&text){placeholder(input)}}}});

目前比较大的网站都完美实现了跟默认效果相同的功能,就是文本框获取焦点后只要内容为空时后面的文件仍然显示着,在IE中我们使用下面的jQuery插件

插件代码

转载自零度科技:http://www.ldisp.com/a/jquery/2012/placeholder.shtml

上一篇:jquery resize 如何监听div或其它元素的resize事件
下一篇:jQuery.autocomplete 自动完成参数详解

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

449

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理