在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>