Vue 点击眼睛图标不影响input焦点&不关闭软键盘

最新推荐文章于 2025-06-04 10:17:48 发布

这个bug不是我写的

最新推荐文章于 2025-06-04 10:17:48 发布

阅读量732

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/SS_S1gn/article/details/109329580

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文解决了密码输入框中切换明文/密文时输入框失去焦点及软键盘关闭的问题，通过使用label标签和合理设置事件监听实现了用户体验的优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考文章：https://blog.csdn.net/ligang2585116/article/details/51764828

密码输入框通常会有切换明文/密文的功能，开发时遇到了问题：点击眼睛图标会占用input的焦点并关闭软键盘，这样体验较差，然后就慢慢解决吧（ps：顺便@一下tb：淘宝h5登录页点击密码的小眼睛也会关闭软键盘的，所以这次之后，大家在某些领域已经超越淘宝了 hhh）

最开始点击眼睛图标时，切换眼睛图标，input控件会失去焦点，并且软键盘关闭
所以在click事件时设置了一个300毫秒的延时让input重新获取焦点，可是每次点击图标，即使调用了input.focus还是会关闭软键盘。。。后来请教了一位大神，学习了label标签，关于label标签的解读和用法如下
在这里插入图片描述

然后，就没有什么难点了，部分代码如下

<input
        :type="inputType"
        :placeholder="currPlaceholder"
        v-model="currentValue"
        :maxlength="currMaxength"
        :disabled="disabled"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        @change="handleChange"
        ref="input"
        id="password"
      />

<label
        v-if="currPassword"
        for="password"
        @click="handlerEyeClick">
        <img
        style="margin-left:10px;width:18px;height:18px" :src="eyeSrc" />

handlerEyeClick() {
      this.blurBecauseClick = true;
      //eyeSrc会根据eyeOpen计算
      this.eyeOpen = !this.eyeOpen;
      const { input } = this.$refs;
      setTimeout(() => {
        input.focus();
      }, 300);
    },

其中handlerEyeClick中有一个标志blurBecauseClick会在点击时置为true，因为项目中password输入框在失去焦点时，会校验输入合法性，点击眼睛图标会设置一个标志，使得此次引发的blur事件回调时不校验合法性，重置标志位，然后直接return
而且，click事件会在input的blur事件之后回调，所以，handlerEyeClick前置绑定在了label的mousedown事件，最终label标签如下：

<label
        v-if="currPassword"
        for="password"
        @mousedown="handlerEyeClick">

至此，已经很完美了，效果图涉及公司项目，就不贴了