CSS 资料总结

White feathe

发布于 2021-12-08 15:25:46

7160

文章被收录于专栏：White feathe 的博客White feathe 的博客

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即可正常使用！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017/05/11 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html5

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度