【文本输入框】显示输入文本的字数,并且限制输入字数不能超过***个字符

需求   实现一个输入框显示文本的字数,并且设置字数限制,当文本中没有内容或字符串长度超出限制,则不能点击确定按钮。

<div class="input-content">
    <div class="pt-2 rounded-tl-xl rounded-tr-xl bg-blue-100">
        <div class="px-4 pb-2 flex justify-between h-8 items-center">
            <span class="text-gray-800 font-semibold text-sm">请输入文本</span>
        </div>
        <div class="h-2 rounded-tl-xl rounded-tr-xl bg-white"></div>
    </div>
    <div class="px-4 pb-11">
        <textarea id="text-input" v-model="text" placeholder="请输入文本,建议使用简短的陈述句。" 
        class="input-textarea"></textarea>
        <div class="absolute inset-x-0 bottom-0 flex items-center justify-between mx-4 mt-2 mb-2">
            <div id="char-count" class="px-2.5 py-px text-xs leading-5 
            rounded-md inline-flex items-center flex-shrink-0 text-gray-800 bg-gray-100 
            !text-gray-500 opacity-50">0<span class="text-gray-300 mx-0.5">/</span>200
            </div>
            <el-button size="medium" type="primary" :disabled="!canClick" 
            :loading="testLoading" round @click="handleTest">确定</el-button>
        </div>
    </div>
</div>
computed: {
    canClick() {
        return this.text.length > 0 && this.text.length <= 200;
    },
}
data() {
    return {
        testLoading: false,
        text: '',
    }
}
mounted() {
    const textarea = document.getElementById('text-input');
    const charCount = document.getElementById('char-count');

    textarea.addEventListener('input', function () {
        const text = textarea.value;
        const count = text.length;
        
        charCount.textContent = count + '/200';
        if (count > 200) {
            textarea.value = text.slice(0, 200); // 截断输入文本,只保留前200个字符
            charCount.style.color = 'red'; // 如果超过200个字符,可以显示为红色提示
        } else {
            charCount.style.color = ''; // 恢复默认颜色
        }
    });
},
.input-content {
    position: relative;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(28 100 242 / var(--tw-border-opacity));
}

.input-textarea {
    height: 220px !important;
    width: 100% !important;
    resize: none !important;
    border-style: none !important;
    font-size: .875rem !important;
    line-height: 1.25rem !important;
    font-weight: 400 !important;
    --tw-text-opacity: 1 !important;
    color: rgb(55 65 81/ 1) !important;
    caret-color: #1c64f2 !important;
    outline: none;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/478933.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue3+threejs新手从零开发卡牌游戏(十):创建己方战域

首先在game目录下创建site文件夹&#xff0c;用来存放战域相关代码&#xff1a; 这里思考下如何创建战域&#xff0c;我的想法是添加一个平面&#xff0c;将己方战域和对方战域都添加进这个平面中&#xff0c;所以首先我们先添加一个战域plane&#xff0c;site/index.vue代码如…

C是用什么语言写出来的?

C是用什么语言写出来的? C语言的起源和发展是一个迭代过程&#xff1a; 1. 最初的C语言编译器的开发始于对B语言的改进。B语言是由Ken Thompson设计的&#xff0c;它是基于BCPL语言简化而来的。在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「 C语言的…

2024.3.20 使用maven打包jar文件和保存到本地仓库

2024.3.20 使用maven打包jar文件和保存到本地仓库 使用maven可以很方便地打包jar文件和导入jar文件&#xff0c;同时还可以将该文件保存在本地仓库重复调用。 使用maven打包jar文件和保存到本地仓库 package打包文件。 install导入本地仓库。 使用maven导入jar文件 点击“…

基于GIS、RS、VORS模型、CCDM模型、geodetecto、GWR模型集成的生态系统健康的耦合协调分析技术

集成多源数据&#xff0c;依托ArcGIS Pro和R语言环境&#xff0c;采用“活力-组织力-恢复力-贡献力”&#xff08;VORS&#xff09;模型定量测算生态系统健康指数&#xff08;EHI&#xff09;&#xff1b;如何从经济城镇化&#xff08;GDPD&#xff09;、人口城镇化&#xff08…

【算法杂货铺】分治

目录 &#x1f308;前言&#x1f308; &#x1f4c1; 快速排序 &#x1f4c2;75. 颜色分类 - 力扣&#xff08;LeetCode&#xff09; &#x1f4c2; 912. 排序数组 - 力扣&#xff08;LeetCode&#xff09; &#x1f4c2; 215. 数组中的第K个最大元素 - 力扣&#xff08;Lee…

以RISC-V架构的CLIC中断机制讲解:中断咬尾、中断抢占、中断晚到

1、中断的相关属性 中断所属特权模式&#xff08;M模式 > S模式 > U模式&#xff09;中断等级&#xff1a;决定是否能够抢占当前的中断中断优先级&#xff1a;影响中断的仲裁&#xff0c;优先级高时优先被响应中断编号&#xff1a;区分中断&#xff0c;影响中断的仲裁 …

操作系统面经-什么是操作系统?

通过以下四点可以概括操作系统到底是什么&#xff1a; 操作系统&#xff08;Operating System&#xff0c;简称 OS&#xff09;是管理计算机硬件与软件资源的程序&#xff0c;是计算机的基石。操作系统本质上是一个运行在计算机上的软件程序 &#xff0c;主要用于管理计算机硬…

视频素材库哪家好?我给大家来分享

视频素材库哪家好&#xff1f;这是很多短视频创作者都会遇到的问题。别着急&#xff0c;今天我就来给大家介绍几个视频素材库哪家好的推荐&#xff0c;让你的视频创作更加轻松有趣&#xff01; 视频素材库哪家好的首选当然是蛙学网啦&#xff01;这里有大量的高质量视频素材&am…

成都百洲文化传媒有限公司电商新浪潮的领航者

在当今电商行业风起云涌的时代&#xff0c;成都百洲文化传媒有限公司以其独特的视角和专业的服务&#xff0c;成为了众多商家争相合作的伙伴。今天&#xff0c;就让我们一起走进百洲文化的世界&#xff0c;探索其背后的成功密码。 一、百洲文化的崛起之路 成都百洲文化传媒有限…

python共享单车信息系统的设计与实现flask-django-php-nodejs

课题主要分为二大模块&#xff1a;即管理员模块和用户模块&#xff0c;主要功能包括&#xff1a;用户、区域、共享单车、单车租赁、租赁归还、报修信息、检修信息等&#xff1b; 语言&#xff1a;Python 框架&#xff1a;django/flask 软件版本&#xff1a;python3.7.7 数据库…

从内存巷弄到指针大道(一)

文章目录 1.内存和地址1.1理解内存地址酒店大堂&#xff1a;内存的入口房间号&#xff1a;内存地址的意义酒店的楼层划分&#xff1a;内存的结构酒店的房间单位&#xff1a;计算机中的常见单位 1.2如何理解编址 2.指针变量和地址2.1取地址操作符&#xff08;&)2.2 指针变量…

windows系统下python进程管理系统

两年来&#xff0c;我们项目的爬虫代码大部分都是放在公司的windows机器上运行的&#xff0c;原因是服务器太贵&#xff0c;没有那么多资源&#xff0c;而windows主机却有很多用不上。为了合理利用公司资源&#xff0c;降低数据采集成本&#xff0c;我在所以任务机器上使用anac…

力扣热门算法题 59. 螺旋矩阵 II,60. 排列序列,61. 旋转链表

59. 螺旋矩阵 II&#xff0c;60. 排列序列&#xff0c;61. 旋转链表&#xff0c;每题做详细思路梳理&#xff0c;配套Python&Java双语代码&#xff0c; 2024.03.21 可通过leetcode所有测试用例。 目录 59. 螺旋矩阵 II 解题思路 完整代码 Java Python 60. 排列序列 …

Linux基础命令[20]-useradd

文章目录 1. useradd 命令说明2. useradd 命令语法3. useradd 命令示例3.1 不加参数3.2 -d&#xff08;指定家目录&#xff09;3.3 -g&#xff08;指定用户组&#xff09;3.4 -G&#xff08;指定附属组&#xff09;3.5 -p&#xff08;加密密码&#xff09;3.6 -e&#xff08;指…

东方博宜 1449. 求满足条件的数的和

东方博宜 1449. 求满足条件的数的和 这道题我苦想了很久&#xff0c;觉得2个及2个以上很难解决&#xff0c;但是后面发现&#xff0c;可以用一个变量记录次数&#xff0c;次数大于等于2就好了。 #include<iostream> using namespace std; int main() {int n ;cin >…

JetPack之DataBinding基础使用

目录 一、简介二、使用2.1 使用环境2.2 xml文件绑定数据2.3 数据绑定的对象2.3.1 object2.3.2 ObseravbleField2.3.3 ObseravbleCollection 2.4 绑定数据 三、应用场景 一、简介 DataBinding是谷歌15年推出的library,DataBinding支持双向绑定&#xff0c;能大大减少绑定app逻辑…

防火墙在解决方案及典型项目中的应用

防火墙在解决方案及典型项目中的应用 防火墙作为基础安全防护产品&#xff0c;在各种解决方案、业务场景中配套应用&#xff0c;本节给出各类方案资料链接方便查阅。 防火墙在华为网络解决方案中的应用 解决方案 文档 主要应用 CloudFabric云数据中心网解决方案 资料专区…

游戏引擎开发公司 Unity 调查:超六成游戏工作室采纳AI助力开发,效率与质量双提升

Unity是一家专注于游戏引擎开发的公司&#xff0c;其开发的Unity引擎被广泛应用于游戏开发领域&#xff0c;为开发者提供了强大的工具来创建高质量的游戏。Unity引擎不仅支持多种平台&#xff0c;而且具有易用性和灵活性&#xff0c;使得开发者能够高效地进行游戏开发。近年来&…

一文速通自监督学习(Self-supervised Learning):教机器自我探索的艺术

一文速通自监督学习&#xff08;Self-supervised Learning&#xff09;&#xff1a;教机器自我探索的艺术 前言自监督学习是什么&#xff1f;自监督学习的魔力常见的自监督学习方法1. 对比学习2. 预测缺失部分3. 旋转识别4. 时间顺序预测 结语 &#x1f308;你好呀&#xff01;…

Springboot 博客_002 项目环境配置

引入相关依赖 mysqlmybatis <dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-…