ie下textarea的placeholder属性不显示的简单解决方案

最新推荐文章于 2019-12-06 14:46:11 发布

黑皮爱学习

最新推荐文章于 2019-12-06 14:46:11 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ie兼容性

本文链接：https://blog.youkuaiyun.com/qq_22701869/article/details/85081563

ie兼容性专栏收录该内容

5 篇文章

订阅专栏

本文介绍了解决HTML5中input和textarea元素占位符（placeholder）不显示或显示异常的问题，提供了三种解决方案，包括修改代码、引入jQuery库文件及自定义JavaScript函数。

第一种：原因是<textarea placeholder="最长为128个字" >（这里有空格）</textarea>，去掉空格就行

第二种：页面引入jquery.placeholder.js，和jquery-1.8.0.min.js（这个放在前面）

链接: https://pan.baidu.com/s/1ly83X3ICeaAVHPTSbuOjIw 提取码: xf5p

第三种：个人认为最简单方便，直接在页面上加上一下代码就能解决

    $(function () {
    	  if(!placeholderSupport()){   // 判断浏览器是否支持 placeholder
    	      $('[placeholder]').focus(function() {
    	          var input = $(this);
    	          if (input.val() == input.attr('placeholder')) {
    	              input.val('');
    	              input.removeClass('placeholder');
    	          }
    	      }).blur(function() {
    	          var input = $(this);
    	          if (input.val() == '' || input.val() == input.attr('placeholder')  ) {
    	              input.addClass('placeholder');
    	              if(input[0].tagName=="TEXTAREA")
    	                input.text(input.attr('placeholder'));
    	              else
    	                input.val(input.attr('placeholder'));
    	          }
    	      }).blur();
    	  };
    	  function placeholderSupport() {
  		    return 'placeholder' in document.createElement('input');
  		  }
        $(".accordions dt").on("click",function(){
            if(!$(this).parent().hasClass("expand")){
                $(this).siblings("dt").removeClass("active")
                $(this).toggleClass("active")
                var target = $(this).next("dd");
                target.siblings("dd").slideUp();
                target.slideToggle();
            }
        });
    })