低版本IE浏览器不兼容placeholder解决方法
虽说现在很多网站都放弃了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
- 点赞
- 收藏
- 分享
- 文章举报
- IE浏览器各版本与web标准不兼容问题解决方案
- jQuery1.4.2与老版本json格式兼容的解决方法
- 解决opacity属性在低版本IE浏览器下失效的方法
- 总结解决maven版本兼容方法
- 两种方法基于jQuery实现IE浏览器兼容placeholder效果
- IE浏览器JSON不兼容问题及浏览器版本问题解决
- 兼容ie浏览器的placeholder的几种方法
- Win8.1下解决IE浏览器不兼容的方法
- idea2019版与maven3.6.2版本不兼容的解决方法
- 一种解决新版本API完全兼容老版本API的方法
- IOS 版本方法兼容解决办法
- 用HTML5的<DOCTYPE>标签兼容各版本IE浏览器的方法技术
- 版本兼容解决方法
- eclipse安装fatjar插件方法及版本不兼容问题解决
- 一种解决新版本API完全兼容老版本API的方法
- spring低版本兼容jdk1.8的解决方法
- 安装EntityFramework,提示“找不到与EntityFramework 6.1.3兼容的EntityFramework.zh-Hans版本。"的解决方法。
- linux (REHL)系统的网络服务与此版本的网络管理器不兼容问题解决方法
- 一种解决新版本API完全兼容老版本API的方法
- 解决低版本IE浏览器渲染模式和html5兼容