CSS 资料总结

矫情吗；* 2022-06-16 09:06 231阅读 0赞

## **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][http_isux.tencent.com_h5-performance.html]

--------------------

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

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

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

--------------------

[http_isux.tencent.com_h5-performance.html]: http://isux.tencent.com/h5-performance.html

发表评论取消回复

表情：

评论列表（有 0 条评论，231人围观）

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

相关阅读

相关 JVM学习资料总结

> 本博客是根据JVM【黑马程序员出品】教学视频学习所做的总结，为了自己更好的复习，从不同网站上进行搬移。 > 原作者网址：[原作者网址][Link 1] Jvm学习目

爱被打了一巴掌/ 2023年01月17日 07:35/ 0 赞/ 179 阅读

相关 Python学习资料总结

把手里积累了这么久的Python入门资料整理了一下，发现其实，有了这些，python入门真的不难，每天花点时间学，真的不会影响工作。下面一起来看看这些资料吧！一、可以学习

偏执的太偏执、/ 2022年12月18日 15:55/ 0 赞/ 211 阅读

相关 Python学习资料总结

作者：林梓链接：https://zhuanlan.zhihu.com/p/22333205 来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请

旧城等待，/ 2022年09月26日 02:56/ 0 赞/ 232 阅读

相关关于资料和总结

ACM常用资料以及速查数论及数学递推 [康托展开][Link 1] [反素数][Link 2] [约数和定理][L

旧城等待，/ 2022年08月22日 15:16/ 0 赞/ 210 阅读

相关个人资料总结

软件分享：[http://www.ccav1.com/][http_www.ccav1.com] 我只是个勤劳的搬运工：[ http://talk.baitongda.cn/

Bertha 。/ 2022年08月18日 13:25/ 0 赞/ 263 阅读

相关 Spark资料总结

一、学习 1，安装Spark，并了解基础操作首先安装上Spark，再执行一下基础操作，就可以了。这里的目的是通过Spark的Shell，了解一下Spark的基础操

比眉伴天荒/ 2022年07月13日 12:23/ 0 赞/ 313 阅读

相关 CSS 资料总结

1、H5表单禁止复制、粘贴的方法（1）、HTML //禁止复制： <input type=text value="fdg" size=50 onselects

矫情吗；*/ 2022年06月16日 09:06/ 0 赞/ 232 阅读

相关 css的使用技巧资料

[http://www.instantshift.com/2010/03/15/47-css-tips-tricks-to-take-your-site-to-the-next

古城微笑少年丶/ 2022年03月31日 03:07/ 0 赞/ 220 阅读

相关几种Css前端框架资料

目录：\[ [\-][-]\] [1 Twitter Bootstrap][1_Twitter Bootstrap] [2 Foundation][2_Found

向右看齐/ 2021年10月19日 20:24/ 0 赞/ 410 阅读

相关 MySQL索引资料总结

MySQL官方对索引的定义为：索引（Index）是帮助MySQL高效获取数据的数据结构。提取句子主干，就可以得到索引的本质：索引是数据结构。本文是对一些讲解mysq

迈不过友情╰/ 2021年09月22日 08:00/ 0 赞/ 349 阅读