zoukankan      html  css  js  c++  java
  • IE8不支持属性placeholder

     $(function () {
                // -- Constants --
                var PLACE_HOLDER_COLOR = "rgb(169,169,169)"; // "darkGrey" does not work in IE6
                var PLACE_HOLDER_DATA_NAME = "original-font-color";
    
                // -- Util Methods --  
                var getContent = function (element) {
                    return $(element).val();
                }
    
                var setContent = function (element, content) {
                    $(element).val(content);
                }
    
                var getPlaceholder = function (element) {
                    return $(element).attr("placeholder");
                }
    
                var isContentEmpty = function (element) {
                    var content = getContent(element);
                    return (content.length === 0) || content == getPlaceholder(element);
                }
    
                var setPlaceholderStyle = function (element) {
                    $(element).data(PLACE_HOLDER_DATA_NAME, $(element).css("color"));
                    $(element).css("color", PLACE_HOLDER_COLOR);
                }
    
                var clearPlaceholderStyle = function (element) {
                    $(element).css("color", $(element).data(PLACE_HOLDER_DATA_NAME));
                    $(element).removeData(PLACE_HOLDER_DATA_NAME);
                }
    
                var showPlaceholder = function (element) {
                    setContent(element, getPlaceholder(element));
                    setPlaceholderStyle(element);
                }
    
                var hidePlaceholder = function (element) {
                    if ($(element).data(PLACE_HOLDER_DATA_NAME)) {
                        setContent(element, "");
                        clearPlaceholderStyle(element);
                    }
                }
    
                // -- Event Handlers --
                var inputFocused = function () {
                    if (isContentEmpty(this)) {
                        hidePlaceholder(this);
                    }
                }
    
                var inputBlurred = function () {
                    if (isContentEmpty(this)) {
                        showPlaceholder(this);
                    }
                }
    
                var parentFormSubmitted = function () {
                    if (isContentEmpty(this)) {
                        hidePlaceholder(this);
                    }
                }
    
                // -- Bind event to components --
                $("textarea, input[type='text']").each(function (index, element) {
                    if ($(element).attr("placeholder")) {
                        $(element).focus(inputFocused);
                        $(element).blur(inputBlurred);
                        $(element).bind("parentformsubmitted", parentFormSubmitted);
    
                        // triggers show place holder on page load
                        $(element).trigger("blur");
                        // triggers form submitted event on parent form submit
                        $(element).parents("form").submit(function () {
                            $(element).trigger("parentformsubmitted");
                        });
                    }
                });
            });
  • 相关阅读:
    13-计算属性和侦听器
    12-指令系统介绍
    11-vue的使用
    10-vue的介绍
    09-babel
    08-webpack的介绍
    07-nodejs中npm的使用
    06-Nodejs介绍
    05-面向对象
    Docker结合Jenkins构建持续集成环境
  • 原文地址:https://www.cnblogs.com/yueyuepeng/p/4301805.html
Copyright © 2011-2022 走看看