解决placeholder的兼容性

placeholder在不支持html5的低版本的浏览器中,placeholder属性是无效的,ie9及以下的ie浏览器不兼该属性。

网上找到了解决办法:

       解决思路是用input的value值来模拟placeholder的效果,包括input类型为password时的替换,但效果和placeholder稍有差异。

具体做法:引入jquery.placeholder.js文件,调用placeholder()方法。

文件下载地址:https://github.com/shwoodard/jquery.placeholder.js。


补充:在项目中应用的过程中发现,当input类型为password时,密码的input框$('input')调用placeholder()方法后获取到的value值为placeholder中的内容,后来仔细看了jquery.placeholder.js文件并结合项目发现,该方法中(type='password'时才会创建)创建的input( class为placeholder_el )和原本页面中存在的input(placeholder)有不同的class(方法中以标明),方法中在提交表单时(submit方法)将创建的input移除。但是,要注意前提要触发submit方法,否则需要在提交表单之前手动移创建的input($('input.placeholder_el').remove();)。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img...
    扑克脸_457e阅读 579评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,837评论 18 139
  • $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({sr...
    专注寒冰三千岁阅读 513评论 0 4
  • 22年12月更新:个人网站关停,如果仍旧对旧教程有兴趣参考 Github 的markdown内容[https://...
    tangyefei阅读 35,207评论 22 257
  • 【素食套餐】 茄汁花椰菜 坚果豆渣青菜糊 小扁豆糙米饭 看似简单的素餐,实则营养丰富,三种蔬菜、三种豆类、一种坚果...
    素之味阅读 521评论 0 0