vue textarea 实现密码框的功能

最新推荐文章于 2024-07-25 23:50:56 发布

bossxu_

最新推荐文章于 2024-07-25 23:50:56 发布

阅读量2.3k

点赞数 1

本文链接：https://blog.csdn.net/bossxu_/article/details/102749247

版权

web前端开发专栏收录该内容

51 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="demo">
    <textarea placeholder="请输入"  v-model="valueText"  @keyup="keyUp(valueText,$event)"   @keydown="keyDown($event)" @input="input" > </textarea>
    <span style="margin-right: 200px"> {{valueShow}}</span>
</div>
</body>
<script>
    const aa = new Vue({
        el: '#demo',
        data() {
            return {
                valueText: '',
                valueTrea:[],
                isCtrl:'',
                flag:true,
                valueShow:''
            }
        },
        methods: {
            keyDown(event) {
                //ctrl复制粘贴事件（true|false）
                this.isCtrl = event.ctrlKey;
                if(event.keyCode==8){
                    this.flag=false;
                    this.valueTrea=this.valueTrea.join().replace(/,/g, "").split('');
                    var $num=event.target.selectionEnd-event.target.selectionStart;
                    if($num==1 || $num==0){
                        var index= event.target.selectionStart;
                        this.valueTrea.splice(index-1,1);
                    }else{
                        this.valueTrea.splice(event.target.selectionStart,$num);
                    }
                    this.valueShow = this.valueTrea.join().replace(/,/g, "") // 输入的明文
                }else{
                    this.flag=true;
                }
            },
            input() {
                if(this.flag && this.valueText.replace(/\*/g, "") !=''){
                    this.passwordText()
                }
            },
            keyUp() {
                if (this.isCtrl && !this.valueCtrl) {
                    this.valueCtrl = this.valueText //  粘贴的明文
                    this.valueShow = ''
                }
               this.passwordText()
            },
            passwordText(){
                this.valueTrea.push(this.valueText.replace(/\*/g, ""));
                this.valueShow=this.valueTrea.join().replace(/,/g, "");
                this.valueText = this.valueText.replace(/./g, '*'); // 替换成密文*号
            }
        }
    });
</script>
</html>

在这里插入图片描述