低版本IE浏览器不兼容placeholder的一些解决方法

浏览: 2,547次 日期:2018年07月15日 18:28:22 作者:青格勒

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

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

 

一、优雅降级解决(极力推荐)

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

 

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

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

<input type="text" value="我是一个input"/>
<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

 

这个我写了一个小插件,大家等我两天

文章链接:http://cenggel.com/js/131.html

版权声明:文章《低版本IE浏览器不兼容placeholder的一些解决方法》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

邮箱地址不会被公开。 必填项已用*标注