vue移动端input，自动获取焦点+滑动列表隐藏软键盘+点击搜索隐藏软键盘

vue移动端input，自动获取焦点+滑动列表隐藏软键盘+点击搜索隐藏软键盘

1、进入页面时，自动获取焦点

使用自定义指令 v-focus 实现

directives: {
    // 自动获取焦点
    focus: {
      inserted: function (el, {value}) {
        if (value) {
          el.focus()
        }
      }
    }
  },

vue官网：自定义指令

2、滑动结果列表时，隐藏软键盘

created 里面新增touchmove事件监听，滑动时，输入框失去焦点，隐藏软键盘。

created () {
    window.addEventListener("touchmove",this.myTouchMove) 
},
methods: {
   // 列表滑动时，隐藏软键盘
   myTouchMove: function (evt) {
     if(document.hasFocus){
       const inputId = document.getElementById('mySearch')  // 获取ID
       inputId.blur()  // input失焦
     }
   },
 }

3、点击软键盘上的搜索时，隐藏软键盘

在input上定义keyup.13事件，点击搜索时，将输入框焦点失去。

methods: {
    // 点击键盘上的搜索，输入框失去焦点，隐藏软键盘
    searchBlur () {
      this.$refs.search.blur()
    },
}

完整代码

<input
	  v-model.trim="searchContent"
	  type="search"
	  ref="search"
	  id="mySearch"
	  class="search-input"
	  placeholder="搜你想要的"
	  v-focus="true"
	  @keyup.13="searchBlur"
	  value='搜索'
	  />
	  
directives: {
  // 自动获取焦点
  focus: {
    inserted: function (el, {value}) {
      if (value) {
        el.focus()
      }
    }
  }
},
methods: {
	// 列表滑动时，隐藏软键盘
	myTouchMove: function (evt) {
	  if(document.hasFocus){
	    const inputId = document.getElementById('mySearch')  // 获取ID
	    inputId.blur()  // input失焦
	  }
	},
	// 点击键盘上的搜索，输入框失去焦点，隐藏软键盘
	searchBlur () {
	  this.$refs.search.blur()
	},
}