CSS 资料总结

1、H5表单禁止复制、粘贴的方法

（1）、HTML

    //禁止复制： <input type=text value="fdg" size=50 onselectstart="return false">     //禁止粘贴： <input type=text value="fdg" size=50 onpaste="return false">

（2）、CSS

     //禁止用户 长按选择复制粘贴---css     -webkit-user-select: none;     -moz-user-select: none;    user-select:none;

---

2、禁止复制粘贴

        *:not(input):not(textarea):not(select),                input[type=image],                input[type=file],                input[type=submit],                input[type=button],                input[type=reset] {                -webkit-user-select: none;            }

---

3、通过 js，去强制 input 元素获得焦点。

element.on("tap",function(e){element.focus();});

---

4、清除浏览器自己的缓存

        <meta http-equiv="pragma" content="no-cache">        <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">        <meta http-equiv="expires" content="0">

---

5、H5穿透点击

css实现

pointer-events:none;

js判断 实现

考虑到某些浏览器不支持CSS3 pointer-events属性，因此，在实际应用的时候，可能要对不同浏览器做不同处理，这个时候就需要判别当前用户浏览器是否支持pointer-events. 下面就是JS实现验证的代码：

var supportsPointerEvents = (function(){  var dummy = document.createElement('_');  if(!('pointerEvents' in dummy.style)) return false;  dummy.style.pointerEvents = 'auto';  dummy.style.pointerEvents = 'x';  document.body.appendChild(dummy);  var r = getComputedStyle(dummy).pointerEvents === 'auto';  document.body.removeChild(dummy);  return r;})();//直接代码（基于jQuery）：function noPointerEvents (element) {    $(element).bind('click mouseover', function (evt) {        this.style.display = 'none';        var x = evt.pageX, y = evt.pageY,        under = document.elementFromPoint(x, y);        this.style.display = '';        evt.stopPropagation();        evt.preventDefault();        $(under).trigger(evt.type);    });}

---

6、解决 UC 浏览器、微信浏览器以及 android 低版本浏览器 的兼容性问题

（1）display:flex

在android 平台的UC浏览器和微信浏览器中使用 display：flex 会出问题

解决方案：

使用 display:flex; 的时候需要加上 display:-webkit-box;

 display:flex; display:-webkit-box;

即可!


（2）flex:1

使用flex:1的时候要加上，

 -webkit-box-flex:1; -moz-box-flex:1; -ms-flex:1;

（3） 使用 align-items:center; 的时候需要加上 -webkit-box-align:center`

（4）使用 flex-direction:column; 的时候需要加上：

   -webkit-box-orient:vertical;    -moz-box-orient:vertical;    box-orient:vertical;

---

7、H5性能优化

http://isux.tencent.com/h5-performance.html

---

8、针对$.load()函数，在调试js代码比较困难的时候，在要load的js头部加上这句话即可

    //@ sourceURL=msgprompt.js（异步加载的js）

注：上面这行代码，必须要放在异步执行的js头部才行，经过测试，Zepto1.2的$.load()函数不好使，
使用 Jquery1.8.3即可正常使用！

---