低版本IE浏览器不兼容placeholder解决方法-创新互联

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

创新互联建站10多年企业网站建设服务;为您提供网站建设,网站制作,网页设计及高端网站定制服务,企业网站建设及推广,对木托盘等多个领域拥有丰富的网站运维经验的网站建设公司。

今天就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

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。

分享文章:低版本IE浏览器不兼容placeholder解决方法-创新互联
链接URL:https://www.cdcxhl.com/article40/epoeo.html

成都网站建设公司_创新互联,为您提供网站维护品牌网站建设用户体验全网营销推广Google移动网站建设

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

h5响应式网站建设