JavaWeb 解决jsp不支持placeholder,IE不支持placeholder

Bertha 。 2022-04-18 04:29 748阅读 0赞

一、介绍

  1. placeholderH5的属性,但是在jsp中,兼容性并不好,很多时候,不起作用,尤其是在IE浏览器中。在开发中,placeholder所体现的功能属性给yong用户展示良好的用户体验,并且可以省去很多的纯js代码写出来达到的xiao效果,如下是解决在各种浏览器中JSP支持placeholderjs代码

二、js代码

  1. placeholderForJSP.js
  2. /*
  3. * @Title: jQuery placeholder, fix for IE6,7,8,9
  4. * @Description: IE对placeholder属性的支持
  5. *
  6. */
  7. var JPlaceHolder = {
  8. //检测
  9. _check : function(){
  10. return 'placeholder' in document.createElement('input');
  11. },
  12. //初始化
  13. init : function(){
  14. if(!this._check()){
  15. this.fix();
  16. }
  17. },
  18. //修复
  19. fix : function(){
  20. jQuery(':input[placeholder]').each(function(index, element) {
  21. var self = $(this), txt = self.attr('placeholder');
  22. self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
  23. var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
  24. var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
  25. self.focusin(function(e) {
  26. holder.hide();
  27. }).focusout(function(e) {
  28. if(!self.val()){
  29. holder.show();
  30. }
  31. });
  32. holder.click(function(e) {
  33. holder.hide();
  34. self.focus();
  35. });
  36. });
  37. }
  38. };
  39. //执行
  40. jQuery(function(){
  41. JPlaceHolder.init();
  42. });

三、jsp中引用

20181108151317790.png

发表评论

表情:
评论列表 (有 0 条评论,748人围观)

还没有评论,来说两句吧...

相关阅读