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

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

### 效果图 ###

![67decfd4b020de341763a459b99e86e8.gif][]

## 主要思路 ##

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

### 源代码 ###

html:

<div id="main-container">
        <div class="textarea">
          <textarea maxlength="200" @input="monitorInput" v-model="textareaContent"></textarea>
          <span class="numLimit">{
       {num}}/200</span>
        </div>
      </div>

css:

.textarea {
          margin: 100px auto;
          width: 100%;
          text-align: center;
        }
    
        .textarea textarea {
          width: 400px;
          height: 300px;
        }
        .numLimit {
          position: relative;
          top: -10px;
          left: -90px;
        }

js:

var vm = new Vue({
          el: '#main-container',
          data: {
            textareaContent:'',
            num: 200,
          },
          methods: {
            monitorInput() {
              var txtVal = this.textareaContent.length;
              this.num = 200 - txtVal;
            }
          },
        });

[67decfd4b020de341763a459b99e86e8.gif]: /images/20220829/d43a6e8d76ee4366931edf0101ac23f2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

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

相关阅读

相关【烦人的前端】textarea统计字数并限制输出

<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8"> <textarea id="userDesc" na

短命女/ 2022年11月18日 11:00/ 0 赞/ 182 阅读

相关使用js实现textarea文本域长度,限制输入字数并统计剩余输入字符数

使用js实现textarea文本域长度,限制输入字数并统计剩余输入字符数输入框输入框 ![在这里插入图片描述][34344f56e9d347658

雨点打透心脏的1/2处/ 2022年09月12日 15:42/ 0 赞/ 243 阅读

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

效果图 ![67decfd4b020de341763a459b99e86e8.gif][] 主要思路 textarea限制最大长度监控输入字数

桃扇骨/ 2022年09月04日 13:59/ 0 赞/ 207 阅读

相关 Vue el-input实现动态显示type为textarea的文字数量、剩余字数

1、<el-form-item label="备注" prop="memo" style="display:block"> <el

约定不等于承诺〃/ 2022年09月04日 13:58/ 0 赞/ 531 阅读

相关限制textarea字数

<html> <head> <script src='jquery-1.3.2.js'></script> <scri

妖狐艹你老母/ 2022年08月09日 06:26/ 0 赞/ 184 阅读

相关 textarea字数限制

<script type="text/javascript"> function collect\_submit() \{ var len = $(".describe

Dear 丶/ 2022年06月08日 13:57/ 0 赞/ 251 阅读

相关 textarea的字数限制

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

た入场券/ 2022年06月01日 13:49/ 0 赞/ 458 阅读

相关动态获取textarea剩余可输入字数

动态获取textarea剩余可输入字数最近在做个人博客，评论部分涉及到剩余可输入字数，虽然是一个简单的不能再简单了的功能，无奈前端不是很熟。于是乎，记录一下。

╰+攻爆jí腚メ/ 2022年04月06日 06:42/ 0 赞/ 253 阅读

相关 Vue实现动态显示textarea文字数量、剩余字数

<template> <div class="text-area"> <textarea maxlength="4

小灰灰/ 2022年02月13日 10:23/ 0 赞/ 861 阅读

相关 textarea字数实时统计方案

最近找了一个通过js实时显示textarea字数统计的方法，稍加修改使它变得更加易用，下面是效果。拉伸和缩小不会影响统计显示。提供了两种计算字数方式。 ![在这里插入图片描

淩亂°似流年/ 2022年01月26日 17:55/ 0 赞/ 427 阅读