低版本浏览器支持placeholder属性

if (!placeholderSupport()) { //判断浏览器是否支持 placeholder
    $(‘[placeholder]‘).focus(function() {
    var input = $(this);
    if (input.val() == input.attr(‘placeholder‘)) {
        input.val(‘‘);
        input.removeClass(‘placeholder‘);
    }
    if (input[type = ‘password‘].val() == input[type = ‘password‘].attr(‘placeholder‘)) {
        input[type = ‘password‘].val(‘‘);
        input[type = ‘password‘].removeClass(‘placeholder‘);
    }
    }).blur(function() {
        var input = $(this);
        if (input.val() == ‘‘ || input.val() == input.attr(‘placeholder‘)) {
        input.addClass(‘placeholder‘);
        input.val(input.attr(‘placeholder‘));
        }
    }).blur();
        }

    function placeholderSupport() {
        return ‘placeholder‘ in document.createElement(‘input‘);
    }

原文地址:https://www.cnblogs.com/newbo/p/11350880.html

时间: 2024-11-15 21:03:02

低版本浏览器支持placeholder属性的相关文章

基于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

jQuery封装placeholder效果,让低版本浏览器支持该效果

页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" placeholder="请输入用户名" value="" id="username"/> 最多加点样式控制下默认文字的颜色 input::-webkit-input-placeholder{color:#AAAAAA;} 但是在低版本的浏览器却不支

如何让IE 低版本下支持 css3属性

依赖源  该文件为  ie-css3.htc    (特别提示.htc为二进制文件,只会在ie中识别,让IE浏览器支持CSS3的一些属性) 以下为依赖文件源码 通过源码我们可以看到 该文件在一定程度上类似于我们所使用的javascrip --Do not remove this if you are using-- Original Author: Remiz Rahnas Original Author URL: http://www.htmlremix.com Published date:

[原创]Web前端开发——让ie 7 8支持placeholder属性

今天在写页面的时候,测试低版本浏览器时,发现input写的placeholder显示的是空白,所以特意写了一个普遍试用的方法来让低版本浏览器支持这个属性. 博主建了一个技术共享qq群:164858883,因为目前人数还比较少,活跃度还不是很高,希望有和我一样想法的,有志于技术共享的技术宅,富有逗比精神的程序猿能一起加入,一起探讨和分享,一起创造更大的进步.当然,妹纸程序猿更受欢迎哟.^_^ 一般情况下,我们解决这个问题呢会使用下面这种方法. 1 <input onfocus="if (va

让IE低版本浏览器也支持placeholder属性

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>让IE低版本浏览器也支持placeholder属性</title>    

解决html5新标签 placeholder 低版本浏览器下不兼容问题

placeholder属性是HTML5 中为input添加的.在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示. 实例:1 <input type="text" name="userName" placeholder="请输入用户名"> placeholder操作起来非常方便,提高了开发效率,同时在高版本浏览器中用户体验也很好,所以本人很喜欢用这个属性. 然而,在IE9以下版本浏

IE8及低版本浏览器不支持CSS3 media queries的解决方法

问题:IE8及其以下低版本IE浏览器在缩小窗口时,UI没有按照相应的要求显示窗口缩小时对应的布局:其他浏览器正常. 定位过程: 其实开始拿到问题时是无从下手,不知所以然,根本就没听说还有media这个CSS属性,就更不知道它的功能了.但是对于解决UI问题,有自己的一套思路,就是首先要思考为什么会错误以及为什么没有错误两个方面,然后针对这两个方面的疑问把html或js或css文件简化再简化,修改再修改,查看UI变化,从而缩小问题范围,最后找出问题根源. 如此我就想为什么其他浏览器界面布局没有问题呢

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

以下代码解决了在IE8及以下浏览器中不支持placeholder属性. 原理:将placeholder的值作为内容写入控件,并添加控件事件来进行模拟. ;(function(){ if( !('placeholder' in document.createElement('input')) ){ // 匹配 除type=password以外所有input.textarea $('input[placeholder][type!=password],textarea[placeholder]').

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

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