【Vue+element-ui】扫码枪输入兼容搜狗输入法

最新推荐文章于 2024-08-23 14:27:28 发布

Anno_O

最新推荐文章于 2024-08-23 14:27:28 发布

阅读量1.8k

点赞数

分类专栏：前端 vue 文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/Anno_O/article/details/129023114

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

文章描述了一个在使用扫码枪时遇到的问题，即搜狗输入法会显示输入框。作者首先尝试通过CSS的opacity来隐藏输入框，但未能解决问题。然后，他们将输入框类型改为password以避免输入法弹出，但此方法导致浏览器保存密码提示。最后，通过添加`autocomplete=new-password`属性，成功阻止了浏览器的保存密码功能，解决了这一问题。

摘要由CSDN通过智能技术生成

问题：当搜狗输入法开启时，扫码枪输入，会带出输入法的输入框

前置条件

扫码枪输入

<!-- 点击事件触发 -->
<el-tag @click="scodeClick">点击扫码</el-tag> 
<!-- 弹窗监听输入 -->
<div class="popCodeBox" v-if="showCode" @click="outCodeClick">
    <i class="icon-code el-icon-full-screen"></i>
    <el-input class="opa" ref="codeInput" v-model="codeStr"  @change="codeChange" @blur="codeBlur" />
</div>

scodeClick() {
   this.showCode = true;
},
codeChange(val) { // 监听input输入
    console.log(val, '获取二维码内容')
},
codeBlur() { // input 失焦
   this.showCode = false;
},
outCodeClick() { // 点击关闭弹窗
  this.showCode = false;
 },

<style>
.popCodeBox {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .6);
    z-index: 9;
}

.popCodeBox .opa {
    /* 隐藏输入框 */
    position: fixed;
    left: 0;
    top: -9999px;
}

.popCodeBox .opa .el-input__inner {
    filter: alpha(opacity=0);
    /* IE */
    -moz-opacity: 0;
    /* 老版Mozilla */
    -khtml-opacity: 0;
    /* 老版Safari */
    opacity: 0;
    /* 支持opacity的浏览器*/
    ime-mode: disabled;
}

.popCodeBox .icon-code {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 200px;
    z-index: 9;
}

.popCodeBox .icon-code::after {
    content: '';
    position: absolute;
    left: 0;
    width: 200px;
    height: 10px;
    background-color: #0079fe;
    border-radius: 10px;
    animation: fadenum 2s linear infinite;
}

@keyframes fadenum {
    0% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(160px);
    }
}
</style>

过程

1.一开始以为是样式opacity不兼容导致扫码录入时有输入框显示，做了浏览器兼容
filter:alpha(opacity=0); /* IE /
-moz-opacity:0; / 老版Mozilla /
-khtml-opacity:0; / 老版Safari /
opacity: 0; / 支持opacity的浏览器*/
2.测试后发现还是存在问题，才发现时搜狗输入法原因，改了input的类型 type=“password”，直接忽略输入问题（也防止中文输入导致码不对）

<el-input class="opa" ref="codeInput" v-model="codeStr" type="password" @change="codeChange" @blur="codeBlur"/>

3.再次测试发现，因为input是密码类型，所以浏览器触发保存密码，新增了autocomplete=“new-password”，解决了这个问题

<el-input class="opa" ref="codeInput" v-model="codeStr" type="password" autocomplete="new-password" @change="codeChange" @blur="codeBlur"/>

最终代码

<template>
    <div>
        <!-- 点击事件触发 -->
        <el-tag @click="scodeClick">点击扫码</el-tag>
        <!-- 弹窗监听输入 -->
        <div class="popCodeBox" v-if="showCode" @click="outCodeClick">
            <i class="icon-code el-icon-full-screen"></i>
            <el-input class="opa" ref="codeInput" v-model="codeStr" @change="codeChange" @blur="codeBlur" />
        </div>
    </div>
</template>
<script>
export default {
    name: "",
    components: {},
    data() {
        return {
            showCode: false
        }
    },
    methods: {
        scodeClick() {
            this.showCode = true;
        },
        codeChange(val) { // 监听input输入
            console.log(val, '获取二维码内容')
        },
        codeBlur() { // input 失焦
            this.showCode = false;
        },
        outCodeClick() { // 点击关闭弹窗
            this.showCode = false;
        },
    }
}
</script>
<style lang="scss" >
.popCodeBox {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .6);
    z-index: 9;
}

.popCodeBox .opa {
    /* 隐藏输入框 */
    position: fixed;
    left: 0;
    top: -9999px;
}

.popCodeBox .opa .el-input__inner {
    filter: alpha(opacity=0);
    /* IE */
    -moz-opacity: 0;
    /* 老版Mozilla */
    -khtml-opacity: 0;
    /* 老版Safari */
    opacity: 0;
    /* 支持opacity的浏览器*/
    ime-mode: disabled;
}

.popCodeBox .icon-code {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 200px;
    z-index: 9;
}

.popCodeBox .icon-code::after {
    content: '';
    position: absolute;
    left: 0;
    width: 200px;
    height: 10px;
    background-color: #0079fe;
    border-radius: 10px;
    animation: fadenum 2s linear infinite;
}

@keyframes fadenum {
    0% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(160px);
    }
}
</style>