在IE8及以下的浏览器中,不支持placeholder属性的解决办法

以下代码解决了在IE8及以下浏览器中不支持placeholder属性。

原理:将placeholder的值作为内容写入控件,并添加控件事件来进行模拟。

;(function(){
    if( !(‘placeholder‘ in document.createElement(‘input‘)) ){
        // 匹配 除type=password以外所有input、textarea
        $(‘input[placeholder][type!=password],textarea[placeholder]‘).each(function(){
            var self = $(this),
            text= self.attr(‘placeholder‘);
            // 如果内容为空,则写入
            if(self.val()===""){
                self.val(text).addClass(‘placeholder‘);
            }

            // 控件激活,清空placeholder
            self.focus(function(){
                if(self.val()===text){
                    self.val("").removeClass(‘placeholder‘);
                }
            // 控件失去焦点,清空placeholder
            }).blur(function(){
                if(self.val()===""){
                    self.val(text).addClass(‘placeholder‘);
                }
            });
        });
    }
})();
时间: 2024-12-20 12:54:38

在IE8及以下的浏览器中,不支持placeholder属性的解决办法的相关文章

IE浏览器中Image对象onload失效的解决办法

作为WEB设计者,为了在网页展示上加强用户体验,经常会利用图象载入显示状态方法,这自然需要Image对象的onload事件. 在firefox浏览器下完成开发后,可是在IE浏览器中进行调试总不能被调用.不管是最新版的IE8还是旧版本的IE7和IE6都无效,最初的代码简化后如下: var img = new Image(); img.src = "test.gif"; img.onload = function(){ alert(this.src); //other }; 简单看过以后貌

安装wampserver之后,浏览器中输入localhost页面显示IIS7解决办法

1.首先保证wamp正常启动 wampserver图标为绿色才为正常启动,如果为橘色说明端口(默认为80)被占用:可以点击图标,然后点Apache->Service->测试80端口,来验证端口是否被占用. 如果占用则去Apache中的配置文件httpd.conf中去修改端口,ctrl+F搜索Listen,将Listen的值改为8080. 2.重启wamp,图标变绿色,将离线状态切换成在线状态 3.正确输入地址 在火狐浏览器中输入localhost:8080

jar中没有主清单属性【解决办法】

<plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <configuration> <source>1.8</source> <target>1.8</target> </configuration> </plugin>

在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doctype html> <html> <header> <meta charset="utf-8"> <title>placeholder</title> <style type="text/css"

让IE支持placeholder属性,跨浏览器placehoder

在html5中,文本框,也就是input, type为text,或者password,新增了一个属性placeholder,也就是占位符,以下是firefox浏览器下的表现形式,当输入的时候,占位符就会消失.这个属性非常好用,因为有这个必要html5才会因素这个属性,然而在IE下,就没有这效果,以下是IE9的表现. 下面是JS版: <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

20170514002Oracle 11g R2安装过程中遇到的报错及解决办法

Oracle 11g R2安装过程中遇到的报错及解决办法 1.提示Check if the DISPLAYvariable is set.    Failed<<<< 解决方案: #xhost +  //切换到root用户输入 #su – Oracle  //切换到oracle用户 $./runInstaller  //执行安装程序 xhost 是用来控制X server访问权限的. 通常当你从hostA登陆到hostB上运行hostB上的应用程序时, 做为应用程序来说,hostA

jQuery中对checkbox设置checked无用解决办法

1. 对html中的多选框设置选择和取消选择,如  $("#id").attr('checked',true);$("#id").attr('checked',false).如果在调试栏中查看elements属性,可以看出,checked是已经设置成功了的,但是在html中不能表现出来. 2. 解决办法 :用prop设置.prop的值为ture或者false.方法如下: $("#id").prop('checked',true); $("

jsp页面中onsubmit=&quot;return checklogin();&quot;报错解决办法

选择Window->Preferences->MyEclipse->Validation 去掉方框里的对号,然后Apply 然后点击Yes->然后再点击ok->Yes,就好了,如果你打开了那个出现错误jsp页面的话,请关掉重现打开就ok啦 jsp页面中onsubmit="return checklogin();"报错解决办法,布布扣,bubuko.com

基于jQuery的让非HTML5浏览器支持placeholder属性的代码(转)

效果图:http://code.google.com/p/jquery-placeholder-js/ 演示代码:http://demo.jb51.net/js/2011/jqueryplaceholder/打包下载:http://xiazai.jb51.net/201105/yuanma/jqueryplaceholder.rar 基于jQuery的让非HTML5浏览器支持placeholder属性的代码(转),布布扣,bubuko.com