vue h5 ios点击屏幕不收起键盘--链接
Vue textarea 和input 开发ios点击空白地方键盘不收起问题
1、创建一个index.js文件
//index.js//解决ios点击屏幕空白出不收起键盘export function objBlurFun (sDom, time = 100) {let isIphone = navigator.userAgent.toUpperCase().includes('IPHONE') // 判断ios环境if (isIphone) {let obj = document.querySelector(sDom) // 这里如果传入的是2个以上 需要用querySelectorAll() 同时objBlur(obj, time) // 需要遍历调用函数}}function objBlur (sDom, time = 300) {if (sDom) {sDom.addEventListener('focus',() => {document.addEventListener('touchend', e => { // 这里的e非常重要，用来判断是否是点击了input表单docTouchend(time, sDom, e)})},false)}}// 元素失去焦点隐藏ihpone的软键盘function docTouchend (time, sDom, e) {if (e.target != sDom) {// 如果点击的是屏幕空白处的情况下console.log(sDom)console.log(e.target)setTimeout(() => {sDom.blur()// 表单失去焦点键盘就会自动收起document.removeEventListener('touchend', this.docTouchend, false) // 收起之后移除监听器}, time)}}//键盘收起end
2、在需要使用的页面引入
import { objBlurFun } from '@/utils/index';<template><div><textareastyle="width: 100%"cols="40"rows="5":placeholder="请输入您的问题"minlength="100"v-model="memo"ref="form__input"id="textarea"@input="handleInput"@blur.prevent="blur()"></textarea></div></template>data(){return{mome:""}}mounted(){objBlurFun('textarea') //解决textarea在ios上点击空白处键盘不收起问题objBlurFun('input') //解决input在ios上点击空白处键盘不收起问题},methods:{//输入文字高度自适应handleInput (e) {e.target.style.height = 'auto';e.target.style.height = e.target.scrollHeight + 'px';this.notNumbers = falsethis.conterNum = this.memo.length;this.parameter.text = this.memo},focus () {this.notNumbers = falsethis.conterNum = this.memo.length;this.parameter.text = this.memo},blur () {this.conterNum = this.memo.length;this.parameter.text = this.memo},}
扩展 js/binmengxue/p/5993166.html
//IOS处理点空白处不自动失去焦点的问题objBlurFun("input");//如果不是当前触摸点不在input上,那么都失去焦点function objBlurFun(sDom,time){var time = time||300;//判断是否为苹果var isIPHONE = navigator.userAgent.toUpperCase().indexOf("IPHONE")!= -1;if(isIPHONE){var obj = document.querySelectorAll(sDom);for(var i=0;i<obj.length;i++){objBlur(obj[i],time);}}} // 元素失去焦点隐藏iphone的软键盘function objBlur(sdom,time){if(sdom){sdom.addEventListener("focus", function(){document.addEventListener("touchend", docTouchend,false);},false);}else{throw new Error("objBlur()没有找到元素");}var docTouchend = function(event){if(event.target!= sdom){setTimeout(function(){sdom.blur();document.removeEventListener('touchend', docTouchend,false);},time);}};}
