H5 EPG异常排查 兼容处理

什么是epg?

EPG是Electronic Program Guide的英文缩写，意思是电子节目指南。
epg页面也就是电视盒子里的h5页面。

由于很多盒子机型比较老，所以大多数情况都是用原生js进行开发，但还是会有很多需要适配和浏览器上不存在的问题。

1. input焦点问题
   如果页面上不只有一个input输入框，默认会有一个获得焦点。这种情况会导致上下左右移动控制焦点失效。
   解决办法：给input加disabled为true，移动到当前项再为false

2. div focus之后出现蓝色边框
   解决办法：

#btn0:focus {
  outline:none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

3.input输入框上下移动光标在最前面，优化为光标在最后
解决办法：

var input1 = $('input1');
setPosition(input1); //将当前input传进去

function setPosition(tobj) {
  spos = tobj.value.length;
  tobj.setSelectionRange(spos, spos);
  if (tobj.setSelectionRange) { //兼容火狐,谷歌
    setTimeout(function () {
      if (tobj.value == "0.0000") {
        tobj.setSelectionRange(spos, spos + 1);
      } else {
        tobj.setSelectionRange(spos, spos);
      }
      tobj.focus();
    }, 0);
  } else if (tobj.createTextRange) { //兼容IE
    var rng = tobj.createTextRange();
    rng.move('character', spos);
    rng.select();
  }
}

4.根据列表高度计算移动距离时，部分盒子距离有问题
解决办法：容易不要用section标签，用div

5.尽量不使用gif图片，会造成页面卡顿，页面加载时间过长

6.图片尺寸过大造成图片显示异常(变色、页面加载缓慢卡顿)
解决办法：图片尺寸不宜过大，背景图选择1倍图，多压缩几遍

7.父元素设置：visibility: hidden; 且不在窗口可见区域
子元素设置：visibility: visible;也不会显示

8.按键事件初始化前不要提前调用，避免函数提升

---

未完待续.....