移動端input和ios的問題

<input unselectable="on" onfocus="this.blur()" id="ticket" type="text" placeholder="請選擇票據類型" :value="ticketType" readonly="readonly">

 

 

 unselectable="on" onfocus="this.blur()" 解決移動端IOS的input框只讀狀態還有光標的問題

 

 

<input id="phone" type="tel" pattern="[0-9]*" placeholder="請輸入手機號碼" v-model="phone" onkeyup="phoneType">

 

onkeyup時間解決瀏覽器不能限制字符數量,函數phoneType限制了只能輸入數字

phoneType 

phoneType(a){

let v = this.phone;

if (v) {

this.phone = v.replace(/\D/g, '');

if (v.length > 11) {

this.phone = v.slice(0, 11);

}

};

 

解決了ios端輸入框有焦點了 總體都放大的問題

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">