textarea统计剩余字数(动态提示)

桃扇骨 2022-09-04 13:59 299阅读 0赞

效果图

67decfd4b020de341763a459b99e86e8.gif

主要思路

  • textarea限制最大长度
  • 监控输入字数

源代码

html:

  1. <div id="main-container">
  2.     <div class="textarea">
  3.       <textarea maxlength="200" @input="monitorInput" v-model="textareaContent"></textarea>
  4.       <span class="numLimit">{
  5.    {num}}/200</span>
  6.     </div>
  7.   </div>

css:

  1. .textarea {
  2.       margin: 100px auto;
  3.       width: 100%;
  4.       text-align: center;
  5.     }
  7.     .textarea textarea {
  8.       width: 400px;
  9.       height: 300px;
  10.     }
  11.     .numLimit {
  12.       position: relative;
  13.       top: -10px;
  14.       left: -90px;
  15.     }

js:

  1. var vm = new Vue({
  2.       el: '#main-container',
  3.       data: {
  4.         textareaContent:'',
  5.         num: 200,
  6.       },
  7.       methods: {
  8.         monitorInput() {
  9.           var txtVal = this.textareaContent.length;
  10.           this.num = 200 - txtVal;
  11.         }
  12.       },
  13.     });

发表评论

表情：
评论列表 （有 0 条评论，299人围观）

还没有评论，来说两句吧...

相关阅读

    相关 textarea的字数限制

    功能描述 在项目中我们经常会遇到要对textarea进行输入字符数的限制，并在下方提示共可输入多少文字，已输入多少，还可输入多少的类似功能。 所以就有了下面封装好的这个

    た 入场券た 入场券/ 0 赞/ 568 阅读