1. Use CSS penetration to override the default style

Common occurrence scenario: if we need to upload files through input, type = "file", and the default style of this input can be said to be very ugly. So we want to cover it with the same size and position as the input through a picture. At this time, obviously, if you click the picture at this time, input will not work. It is because img blocks the penetration of click. What we hope is that this img only visually blocks the input style, but it still clicks on input when clicking. So, just make img penetrable.
css code is as follows:

img {
  pointer-events: none;
}

2. Implement the custom style of the native select control

The native style of the select mobile terminal is ugly, but the native pop-up effect is in line with our design principles. When directly modifying the select style, a strange phenomenon occurs. When debugging on chrome, the self-defined style works, and it also works on Android phones, but it doesn't work on ios phones. For typical incompatibility problems, disable the native style at this time.
css code is as follows:

select {
  -webkit-appearance: none;
}

3. Text overflow processing

The page of mobile devices is relatively small, and some information displayed often needs to be omitted. The most common are single line Title overflow omission and multi line detail overflow omission. Now they are all developed with the framework. This proposal requirement proposal forms a basic component, which is convenient and fast.
css code is as follows:

//Single line
.single {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
//Multiline
.more {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  work-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; //Specify the number of rows
}

4. Turn on elastic rolling

css code is as follows:

body {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

Note: Android does not support native elastic scrolling, but it can be implemented with the help of iscrol, a third-party library.

5. One pixel border setting

Many times, you want to keep the size of the border 1px in any setting, but because 1px uses 2dp rendering, that is, it will be displayed as 2px. So, use css3 to zoom.
css code is as follows:

.folder li {
  position: relative;
  padding: 5px;
}
.folder li + li:before {
  position: absolute;
  top: -1px;
  left: 0;
  content: " ";
  width: 100%;
  height: 1px;
  border-top: 1px solid #ccc;
  -webkit-transform: scaleY(0.5);
}

6. Prevent mouse selection events

Adding onslectstart = "return false" to the element can prevent the mouse from selecting events.

<div class="mask" onselectstart="return false"></div>
<div class="link">
  <a href="javascrip;;">Sign in</a>
</div>

7. Bind events to dynamically added elements

Use the event agent to achieve this effect. For example:

$(document).on("click", ".large", slide); //Writing in jq
//The first parameter represents the corresponding event, the second is the id or class of the element to be bound to the event, and the third is the corresponding event function name to be bound

8. Transparency processing compatible with IE browser

.ui {
  width: 100%;
  height: 100%;
  opacity: 0.4;
  filter: Alpha(opacity=40); //Processing compatible with IE browser
}

9. Common full screen centered JS functions

//Get element
function getElement(ele) {
  return document.getElementById(ele);
}
//Auto center function
function autoCenter(el) {
  var bodyX = document.documentElement.offsetWidth || document.body.offsetWidth;
  var bodyY =
    document.documentElement.offsetHeight || document.body.offsetHeight;

  var elementX = el.offsetWidth;
  var elementY = el.offsetHeight;

  el.style.left = (bodyX - elementX) / 2 + "px";
  el.style.top = (bodyY - elementY) / 2 + "px";
}

10. Common full screen centered CSS functions

body {
  height: 100vh;
  text-align: center;
  line-height: 100vh;
}

11. Make a judgment after entering the content in the input box and pressing enter

For example, after entering 11000, press enter.

<input type="textbox" id="textbox1" onkeypress="CheckInfo" />

<script language="javascript" type="text/javascript">
    function CheckInfo(){
        if (event.keyCode==13) {
            alert(textbox1.text);
        }
    }
</script>

12. chrome debugging shortcut

① ctrl+shift+f full text search
② ctrl+o find file name
③ ctrl+shift+o find js function name

https://mp.weixin.qq.com/s/SZkZe_CkbLUzwTqQ1X9zMw