在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>
原文地址：https://www.cnblogs.com/jingjing-blog/p/8177530.html
时间： 2024-11-09 10:16:16