CSS 资料总结

2021-12-08 15:25:46 浏览数 (1)

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

（1）、HTML

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

（2）、CSS

代码语言：javascript复制
     //禁止用户 长按选择复制粘贴---css 
    -webkit-user-select: none; 
    -moz-user-select: none;
    user-select:none;

2、禁止复制粘贴

代码语言：javascript复制
        *: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 元素获得焦点。

代码语言：javascript复制
element.on("tap",function(e){element.focus();});

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

代码语言：javascript复制
        <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实现

代码语言：javascript复制
pointer-events:none;

js判断 实现

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

代码语言：javascript复制
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;

代码语言：javascript复制
 display:flex;
 display:-webkit-box;

即可! （2）flex:1

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

代码语言：javascript复制
 -webkit-box-flex:1;
 -moz-box-flex:1;
 -ms-flex:1;

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

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

代码语言：javascript复制
   -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头部加上这句话即可

代码语言：javascript复制
    //@ sourceURL=msgprompt.js（异步加载的js）

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

html5 android 微信 css html

0 人点赞