vue h5 搜索框调起手机键盘事件通过键盘搜索兼容ios且处理自动填充背景色及消除ios背景色

最新推荐文章于 2024-09-30 16:19:08 发布

李白和星星

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量247

点赞数 3

文章标签： vue.js ios 前端

本文链接：https://blog.csdn.net/qq_35469137/article/details/141471057

版权

<template>
    <form action="javascript:return true" class="searchmenu" >
                <input type="search" placeholder="请输入关键词" name="search"  v-        model="value" ref="input1" @keyup.13="search">
                <i @click="search"></i>
     </form>
</template>
<script>
export default{
     data() {
        return{
            value: '',
        }
    },
    method:{
        //搜索
        search() {
            this.currentPage = 1
            if(this.value==''){
                this.getzpinfo(this.currentPage, this.pageSize)
                this.$refs.input1.blur()//关闭键盘
            }else if(this.isValidString(this.value)){
                this.getzpinfo(this.currentPage, this.pageSize)
                this.$refs.input1.blur()//关闭键盘
            }else{
                this.$toast('请输入中文、数字、字母、下划线或者中文逗号');
            }
            

        },
    },
}
</script>

.searchmenu input::-ms-clear, ::-ms-reveal {display:none;}
input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;
}
/* 去掉ios默认背景颜色 */
input[type="search"] {
    -webkit-appearance: none;
    border: none;
    outline: none;
    background-color: transparent;
  }
/* 修改自动填充时的背景颜色 */
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  /* -webkit-text-fill-color: #FFFFFF !important; */
  transition: background-color 5000s ease-in-out 0s !important;
  -webkit-text-fill-color: #323233;
}

有几点需要提示：

1 必须加form,用form标签包裹input，兼容ios系统。

2 form标签必须有action,action="javascript:return true"

3 input type="search"，即可调起手机键盘，将键盘中的换行或者什么其他的按钮变成搜索。

4 @keyup.13="search" 绑定键盘搜索事件，点击键盘上的搜索按钮搜索。

5 点击键盘搜索后，this.$refs.input1.blur()//关闭键盘