标签：valued val 低版本 value values placeholder input IE

虽说现在很多网站都放弃了IE浏览器的低版本，但是很多时候咱们还得看甲方的要求就制作网站。如果甲方要求兼容IE789，那么咱们就得给人家做出来兼容的产品。

今天就IE789的input标签的placeholder说一说解决方法。

一、优雅降级解决（极力推荐）

也就是俗称的不解决细节，只要大体能满足浏览的要求就可以，placeholder低版本不显示，那么咱们就不在去做兼容方法，反正以后的几年IE低版本的浏览器会被淘汰。

二、使用input的value制作placeholder的效果

这个是我以前用的一个方法，当input有光标的时候删除value的值，光标离开的时候再去查看内容，如果是空或者是跟原来的值一样的就显示value，具体代码如下。

<input type="text" value="我是一个input"/>（www.gendan5.com）
<script type="text/javascript">
$(function(){
$('input').each(function(){
$(this).attr('data-value',$(this).val())
})
$('input').on('focus input',function(){
var values = $(this).val();
var valued = $(this).data('value');
if ( values == valued ){
$(this).val('')
};
});
$('input').on('blur input',function(){
var values = $(this).val();
var valued = $(this).data('value');
if ( values == '' || values == valued){
$(this).val(valued)
};
});
});
</script>

三、使用另一个容器放input的内容（推荐）

具体的流程，

1、判断浏览器的版本，如果是低版本的浏览器启用容器提示方法

2、把input的placeholder放在box里面定位到input的下方，并且给input透明的背景

3、当鼠标获取+value有变化的的时候隐藏box

4、光标离开的时候内容进行比较，如果没有改变重新显示文字的box

标签：valued,val,低版本,value,values,placeholder,input,IE
来源： https://blog.51cto.com/14513127/2434947

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。