在input输入框中使用placeholder，可以给用户起到提醒或指引的作用，但是IE9及以下的IE版本都不支持placeholder，故在此给出一些解决方法：
- 使用value来代替（做非空判断时需要排除值等于placeholder值的情况）
- 添加标签（需注意如何触发事件）
- 引用现成插件 jquery.placeholder.min.js（请自行搜索下载，此处就不多说了）
不管用哪种方法，我们都要先判断浏览器是否不支持placeholder，不支持的时候我们才需要处理
function placehSupport() { return ‘placeholder‘ in document.createElement(‘input‘) ; }
1.
<body>
<input id="title" type="text" placeholder="请输入标题">
<script src="jquery-1.11.3.js"></script>
<script>
$(function(){
function placehSupport() {
return ‘placeholder‘ in document.createElement(‘input‘);
}
if(!placehSupport){ // 判断浏览器是否支持 placeholder
var placeVal = $(‘input#title‘).attr(‘placeholder‘);
$(‘input#title‘).val(placeVal);
$(‘input#title‘).focus(function(){
if($.trim($(‘input#title‘).val())==placeVal ) {
$(‘input#title‘).val(‘‘);
}
});
input.blur(function(){
if($.trim($(‘input#title‘).val())==‘‘) {
$(‘input#title‘).val(placeVal );
} }); } });
</script>
</body>
2.
<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 placeholderSupport() { return ‘placeholder‘ in document.createElement(‘input‘); } if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder $("input[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>
