监听输入框字符数

遥远的她'

于 2019-12-23 14:27:16 发布

阅读量240

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/a871805820/article/details/103664682

版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个基于Vue.js的输入框组件，该组件能够实时监测并显示用户输入的字符数量，确保输入内容不超过预设的最大长度。通过自定义方法实现了字数的动态更新和显示。

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

<div class="textareaBox">
 <textarea id="wishContent" cols="30" rows="10" maxlength="300" placeholder="请输入反馈内容" v-model="feedbackContent" @input="monitor"></textarea>
      <span class="wordsNum">{{feedbackContent ? feedbackContent.length + '/300' : wordsNum ? wordsNum : '0/300'}}</span>
</div>

export default {
	data() {
            return {
                feedbackContent: '',    // 内容
                wordsNum: '',   // 输入字符
            }
        },
    methods: {
		// 监听输入框
            monitor() {
                //判断字数
                let len;
                if (this.feedbackContent) {
                    len = this.checkStrLengths(this.feedbackContent, 300);
                } else {
                    len = 0
                }
                //显示字数
                this.wordsNum = len + '/300'
            },
            // 校验字数
            checkStrLengths(str, maxLength) {
                let result = 0;
                if (str && str.length > maxLength) {
                    result = maxLength;
                } else {
                    result = str.length;
                }
                return result;
            }
	}    
}

	.textareaBox {
        position: relative;
    }

    .wordsNum {
        position: absolute;
        bottom: 0.83rem;
        right: 0.83rem;
        color: #B3B3B3;
        font-size: 1rem;
    }