zoukankan      html  css  js  c++  java
  • 兼容IE9下的placeholder

    $(document).ready(function(){
    // 兼容IE9下的placeholder
    function placeholderSupport() {
    return 'placeholder' in document.createElement('input');
    }
    if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder
    $("[placeholder]").each(function(){
    var _this=$(this);
    if(_this[0].tagName=='TEXTAREA'){
    _this.parent().css("position","relative").append('<span class="placeholder" data-type="placeholder" style="position: absolute;top:26px;left:2px;">'+_this.attr("placeholder")+'</span>');
    }else if(_this[0].tagName=='SELECT'){

    }else{
    _this.parent().append('<span class="placeholder" data-type="placeholder" style="position: absolute;bottom:7px;left:2px;">'+_this.attr("placeholder")+'</span>');
    }

    if(_this.val() != ""){
    _this.parent().find("span.placeholder").hide();
    }else{
    _this.parent().find("span.placeholder").show();
    }
    }).on("focus", function(){
    $(this).parent().find("span.placeholder").hide();
    }).on("blur", function(){
    var _this = $(this);
    if(_this.val() != ""){
    _this.parent().find("span.placeholder").hide();
    }else{
    _this.parent().find("span.placeholder").show();
    }
    });
    // 点击表示placeholder的标签相当于触发input
    $("span.placeholder").on("click", function(){
    $(this).hide();
    $(this).siblings("[placeholder]").trigger("click");
    $(this).siblings("[placeholder]").trigger("focus");
    });
    }
    })

  • 相关阅读:
    Vue.js 章6 v-model与表单
    Vue.js 简单购物车开发
    Vue.js实战 章五:内置指令
    Vue stage3
    Vue初接触 stage1
    前端代码的一些恶优化
    websocket介绍 以及 vue websocket使用案例
    回忆一下跨域
    如何使用Flexible这样的一库来完成H5页面的终端适配
    css 输入px单位的数值 直接转换为rem的插件
  • 原文地址:https://www.cnblogs.com/wdd-cindy/p/9330371.html
Copyright © 2011-2022 走看看