简单实现IE9及以下对placeholder的兼容性

你的名字 2022-06-10 13:36 188阅读 0赞

placeholder属性的出现使input输入框不再单调，而且可以对用户做一个对输入内容的提醒或者指引，起到了很好的作用。但是 但是IE9及IE9以下不支持这个属性，这就让人很恼火呀，毕竟中国还有好多人用的是IE9及以下浏览器/(ㄒoㄒ)/~~。

现在网上流行的两种解决方式是：

1.  使用value来代替
2.  添加标签
3.  引用现成插件 jquery.placeholder.min.js（下载链接：[http://download.csdn.net/download/fxss5201/9942270][http_download.csdn.net_download_fxss5201_9942270]，当然也可以直接去github上自己搜索下载）

我这里使用的是第二中解决方式，当然了第三种现成插件很成熟，但是感觉任何一个小问题如果都靠插件来解决会造成加载的js相当多，而且自己多思考多尝试也是挺好的。

之所以不用第一种方式，是因为一般表单最后提交的时候我们都需要进行非空判断，这时候value就会影响判断，分不清到底是提示语还是填写的输入内容。第二种方式就不会造成这样的影响。

首先，肯定要保证不影响现代浏览器（支持placeholder属性的浏览器），这个时候我们就需要对其进行判断是否支持placeholder属性：

function placeholderSupport() { 
        return 'placeholder' in document.createElement('input');
    }

上述这段代码可进行判断浏览器是否兼容placeholder属性，只有在不支持的时候才需要进行相应的处理。

然后就需要在其父元素的html中append一个标签来用作显示placeholder，这样就需要父元素必须采用定位布局，假如父元素为：position: relative;，用作显示placeholder的标签采用position:absolute;布局。

但是这还不够，因为我们一般会对input做一些处理，例如高度，这样的话要让placeholder的标签垂直居中则必须设置line-height，当然一般还会设置input的padding-left，placeholder的标签刚好是定位布局，则可以用left表示了。

下面是一整个例子（由于是基于jquery-1.11.3.js的，所以在查看的时候请自行引入该js，并保证命名一致）：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单实现IE9及以下对placeholder的兼容性</title>
        <style> * { margin: 0;padding: 0;font-family: "Microsoft YaHei";font-size: 14px;} .input-box { margin: 10px;position: relative;width: 100px;height: 30px;line-height: 30px;} .input1 { width: 100%;height: 100%;padding-left: 5px;} .input2 { width: 100%;height: 100%;padding-left: 10px;} .placeholder { position: absolute;top: 0;z-index: 10;color: #888;} </style>
    </head>
    <body>
    <div class="input-box">
        <input class="input1" type="text" placeholder="请输入标题">
    </div>
    <div class="input-box">
        <input class="input2" type="text" placeholder="请输入文章">
    </div>
    <script src="jquery-1.11.3.js"></script>
    <script> $(function(){ // 兼容IE9下的placeholder function placeholderSupport() { return 'placeholder' in document.createElement('input'); } if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder $("[placeholder]").each(function(){ var _this = $(this); var left = _this.css("padding-left"); _this.parent().append('<span class="placeholder" data-type="placeholder" style="left: ' + left + '">' + _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"); }); } }) </script>
    </body>
    </html>

[http_download.csdn.net_download_fxss5201_9942270]: http://download.csdn.net/download/fxss5201/9942270