码迷,mamicode.com
首页 > 其他好文 > 详细

兼容ie的placeholder设置

时间:2014-08-01 22:56:32      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   java   io   for   cti   ar   

 

html5的placeholder在ie上不被支持,解决的方法

直接在网页里添加

<!--兼容ie的placeholder-->
<script src="static/js/placeholder.js"></script>

就可以了

// JavaScript Document
(function($) {

    /**
     * Spoofs placeholders in browsers that don‘t support them (eg Firefox 3)
     * 
     * Copyright 2011 Dan Bentley
     * Licensed under the Apache License 2.0
     *
     * Author: Dan Bentley [github.com/danbentley]
     */

    // Return if native support is available.
    if ("placeholder" in document.createElement("input")) return;

    $(document).ready(function(){
        $(‘:input[placeholder]‘).not(‘:password‘).each(function() {
            setupPlaceholder($(this));
        });
     
        $(‘:password[placeholder]‘).each(function() {
            setupPasswords($(this));
        });
      
        $(‘form‘).submit(function(e) {
            clearPlaceholdersBeforeSubmit($(this));
        });
    });

    function setupPlaceholder(input) {

        var placeholderText = input.attr(‘placeholder‘);

        setPlaceholderOrFlagChanged(input, placeholderText);
        input.focus(function(e) {
            if (input.data(‘changed‘) === true) return;
            if (input.val() === placeholderText) input.val(‘‘);
        }).blur(function(e) {
            if (input.val() === ‘‘) input.val(placeholderText); 
        }).change(function(e) {
            input.data(‘changed‘, input.val() !== ‘‘);
        });
    }

    function setPlaceholderOrFlagChanged(input, text) {
        (input.val() === ‘‘) ? input.val(text) : input.data(‘changed‘, true);
    }

    function setupPasswords(input) {
        var passwordPlaceholder = createPasswordPlaceholder(input);
        input.after(passwordPlaceholder);

        (input.val() === ‘‘) ? input.hide() : passwordPlaceholder.hide();

        $(input).blur(function(e) {
            if (input.val() !== ‘‘) return;
            input.hide();
            passwordPlaceholder.show();
        });
        
        $(passwordPlaceholder).focus(function(e) {
            input.show().focus();
            passwordPlaceholder.hide();
        });
    }

    function createPasswordPlaceholder(input) {
        return $(‘<input>‘).attr({
            placeholder: input.attr(‘placeholder‘),
            value: input.attr(‘placeholder‘),
            id: input.attr(‘id‘),
            readonly: true
        }).addClass(input.attr(‘class‘));
    }

    function clearPlaceholdersBeforeSubmit(form) {
        form.find(‘:input[placeholder]‘).each(function() {
            if ($(this).data(‘changed‘) === true) return;
            if ($(this).val() === $(this).attr(‘placeholder‘)) $(this).val(‘‘);
        });
    }
})(jQuery);

 

兼容ie的placeholder设置,布布扣,bubuko.com

兼容ie的placeholder设置

标签:style   blog   color   java   io   for   cti   ar   

原文地址:http://www.cnblogs.com/zhangruiyun/p/3885868.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!