热门关键字:
jquery > jquery教程 > jquery教程 > IE兼容html5的placeholder属性

IE兼容html5的placeholder属性

301
作者:管理员
发布时间:2021/2/5 16:21:35
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=3878
IE如何兼容placeholder属性
HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现。但现在placeholder属性既可以完美实现。


<input id="t1" type="text" placeholder="请输入文字" />


但是测试中发现,ie9以下的版本并不支持这个属性,所以必须兼容,方法也很简单用jQuery实现placeholder的功能。下面


直接直接上代码:


// 兼容ie9 的placeholder属性
$(function() {
    function input(obj, val) {
        var $input = obj;
        var val = val;
        $input.attr({value:val});
        $input.focus(function() {
        if ($input.val() == val) {
             $(this).attr({value:""});
        }
        }).blur(function() {
        if ($input.val() == "") {
            $(this).attr({value:val});
        }
        });
    }
    $('input').not("input[type='password']").each(function() {
        var self = $(this);
        var val = self.attr("placeholder");
        input(self, val);
        // alert(val);
    });
});


保存一个js文件直接用,原理就不多解释了,很简单。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jQuery
友荐云推荐