H5 end FAQ

1. pop numeric keypad

　<! - the '#', '*' symbol keyboard -> 
  <INPUT type = "Tel" /> 
  <! - pure digital keyboard (using regular pattern) -> 
  <INPUT pattern = "\ D * "/>

2. Open the native application

<a href="weixin://"> open micro-channel </a> 
<a href="alipays://platformapi/startapp?saId=10000007"> open Alipay </a>

This method is called URL Scheme, is a protocol that is generally used to access a page APP or APP, function

Protocol format:

scheme://[path][?query]

3. Ignore automatic identification

Some browsers will automatically recognize the phone number or email account, such as <p> 15018888888 </ p>

You can add attributes meta tags to avoid this

<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />

4. resolved input loses focus page does not rebound

Typically occurs in the micro-channel device IOS internal browser, page height condition occurs is too small, the page needs to be moved upward focusing

solution:

<template>
  <input type="text" v-model="inputData" @focus="focus" @blur="blur" />
</template>
<script>
export default {
  data() {
    return {
      inputData: '',
      scrollTop: 0
    }
  },
  methods: {
    focus() {
      this.scrollTop = document.scrollingElement.scrollTop
    },
    blur() {
      document.scrollingElement.scrollTo(0, this.scrollTop)
    }
  }
}
</script>

The slide is not smooth

Where after the auto || scroll: ios generally appear in the device, using a custom overflow box

Optimized code

div {
  -webkit-overflow-scrolling: touch;
}

 

https://juejin.im/post/5d6e1899e51d453b1e478b29