Vue3：监听textarea输入

米柆

已于 2023-12-04 15:07:52 修改

阅读量2.3k

点赞数 1

分类专栏： Millia's work 文章标签： vue.js 前端 javascript

于 2022-07-20 16:38:58 首次发布

本文链接：https://blog.csdn.net/millia/article/details/125894961

版权

Millia's work 专栏收录该内容

53 篇文章 4 订阅

订阅专栏

textarea最大输入字符200，需设置maxlength="200"，通过length值来提示输入量。不设置maxlength也可以通过watch监听提示或者截除。

HTML

<ul class="UserList">

<!--其他HTML结构-->

<li>
<textarea class="inputTxt" name="" v-model="textareaData" placeholder="请输入在职岗位职责说明" maxlength="200"></textarea>
<span class="textareaLength">({{textareaData.length}}/200)</span>
</li>

<!--其他HTML结构-->

</ul>

Css

.UserList li{position:relative;}
.UserList li .textareaLength{position:absolute;right:5px;bottom:5px;color:#999;font-size:1.2rem;}
.inputTxt{min-height:200px;}

JS

<!--Vue3写法-->
<script setup>
import {ref,watch} from 'vue';

let textareaData = ref()
watch(textareaData,(newValue,oldValue) => {
  console.log(textareaData.value.length)
  if(textareaData.value.length>100){
    alert("字数超啦！")
    textareaData.value = String(textareaData.value).slice(0,100)
  }
})

</script>



<!--Vue2写法-->
data () {
  return {
    textareaData:""//输入字符
  }
},
watch:{
  //通过watch监听截除这里设置的长度是100会优先于maxlength="200"的设置
  textareaData(){
    if(this.textareaData.length>100){
      alert("字数超啦！")
      this.textareaData = String(this.textareaData).slice(0,100)
    }
  }
}