对文本框做字数限制

news2025/1/19 11:11:16
效果图

在这里插入图片描述

实现步骤

其中绝对布局根据需求自行调整

<!--单文本输入框-->
<div class="form-group">
    <label class="col-sm-2 control-label is-required">面试公司:</label>
    <div class="col-sm-9">
        <input name="companyName" id="companyName" class="form-control" placeholder="请填写面试公司名称">
        <span style="position:absolute;right: 22px;bottom: 6px;" id="wordLimit1">0<span> / 20</span></span>
    </div>
</div>

<!--多文本输入框-->
<div class="form-group">
    <label class="col-sm-2 control-label">备注:</label>
    <div class="col-sm-9">
        <textarea type="text" name="remarks" id="remarks" class="form-control no-horizontal-resize" placeholder="请填写备注信息"></textarea>
        <span style="position:absolute;right: 4%;bottom: 5px;" id="wordLimit5">0<span> / 200</span></span>
    </div>
</div>
<script th:inline="javascript">
	$(function () {
		$("#companyName").wordCount(20, $("#wordLimit1"));
		$("#remarks").wordCount(200, $("#wordLimit5"));
	});

	$.fn.extend({
    wordCount: function (maxLength, wordWrapper) {
        var self = this;
        $(self).attr("maxlength", maxLength);
        showWordCount();
        $(this).on("input propertychange", showWordCount);

        function showWordCount() {
            curLength = $(self).val().length;
            wordWrapper.text(curLength + "/" + maxLength);
        }
    }
});
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【原创】springboot+mysql校园宿舍报修管理系统设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…

日志:打印技巧

一、概览 Unity日志打印技巧 常规日志打印彩色日志日志存储与上传日志开关日志双击溯源 二、常规日志打印 1、打印Hello World 调用堆栈可以很好的帮助我们定位问题&#xff0c;特别是报错的Error日志 Debug.Log("Hello World");Debug.Log("This is a log m…

【Linux】线程机制解析:理解、优势与Linux系统应用

文章目录 前言&#xff1a;1. 线程概念1.1. 什么是线程1.2. 线程得优点&#xff1a;1.3. 线程的缺点线程异常线程的用途 2. 线程的理解&#xff08;Linux 系统为例&#xff09;2.1. 为什么要设计Linux“线程"&#xff1f;2.2. 什么是进程&#xff1f;2.3. 关于调度的问题2…

图像归一化处理

归一化 归一化是一种简化计算的方式&#xff0c;即将有量纲的表达式&#xff0c;经过变换&#xff0c;化为无量纲的表达式&#xff0c;成为标量。 在多种计算中都经常用到这种方法。 简单介绍 归一化是一种无量纲处理手段&#xff0c;使物理系统数值的绝对值变成某种相对值关…

IDEA报错:java 找不到符号

IDEA报错:java 找不到符号,代码没问题,IDEA缓存也清理了也重新构建了就是不行 最后使用终极大法 -Djps.track.ap.dependenciesfalse

Eclipse 里如何建立SAP应用服务层的CDS

关于Core Data Service(CDS) CDS:Core Data Ser vice.核心数据服务。CDS 是使用基于 SQL的数据定义语言(DDL)定义的&#xff0c;该语言基于标准 SQL 并带有一些附加概念。使用类似 SQL的灵活表达式可以进行复杂的数据建模。有两种类型的 CDS:ABAP CDS 和 HANA CDS。 S/4 HANA…

Unity Pixels Per Unit 与 Sprite Renderer Scale的逻辑关系,为什么平铺的Sprite Renderer会变形?

SpriteRenderer之前用的比较基础&#xff0c;没遇到过什么问题&#xff0c;这几天使用SpriteRenderer的平铺时发现平铺变形了&#xff0c;研究了一下&#xff0c;原来有这么多在逻辑在里面。 当我们导入图片选择Texture Type为Sprite时表示我们的图片用途是UI或者SpriteRendere…

【刷题(2)】矩阵

一、矩阵问题基础 遍历&#xff1a; for i in range(len(matrix[0])): for j in range(len(matrix): while 倒序遍历&#xff1a; for i in range(right,left,-1) 临时存储&#xff1a;temp w,h:len(matrix[0])-1 len(matrix)-1 left,right,top,bottom:0 len(matrix[0])-1 0 l…

NMACDR:基于邻居交互增强和多头注意力机制的跨域推荐模型

基于邻居交互增强和多头注意力机制的跨域推荐模型 湖北民族大学学报-孙克雷、汪盈盈-2023 思路 针对基于映射的跨域推荐模型没有充分关注源域中数据稀疏的用户,导致用户偏好的迁移效率降低的问题,提出本文。 首先,利用邻居用户的交互来增强源域中数据稀疏用户的交互序列,…

热搜榜小工具,摸鱼必备NO.99

本文一共:188 个字,需要阅读:1 分钟,更新时间:2024年5 月14日,部分内容具有时效性,如有失效请留言,阅读量:0 这个小工具集成了微博热搜、百度热搜、今日头条热搜、抖音热搜&#xff0c;随意切换 右上角有个设置&#xff0c;可以设置自动刷新时间、监控关键词、透明度、靠边隐藏…

鸿蒙内核源码分析 (编码方式篇) | 机器指令是如何编码的?

本篇说清楚 ARM指令是如何被编码的&#xff0c;机器指令由哪些部分构成&#xff0c;指令有哪些类型&#xff0c;每种类型的语法又是怎样的 ? 代码案例 | C -> 汇编 -> 机器指令 看一段C语言编译(clang)成的最后的机器指令(armv7) int main(){int a 0;if( a ! 1) a …

dataframe数据常用python操作

dataframe数据常用python操作 dataframe数据常用知识点1.创建dataframe1.1使用字典创建DataFrame&#xff1a;1.2使用列表创建DataFrame&#xff1a;1.3使用numpy数组创建DataFrame&#xff1a;1.4从TXT文件中创建DataFrame&#xff1a;1.5从CSV文件中创建DataFrame&#xff1a…

卡巴斯基:2024年Q1漏洞和利用报告

近日&#xff0c;卡巴斯基发布了《2024年Q1漏洞和利用报告》&#xff0c;提供了一系列有洞察力的统计和分析快照&#xff0c;揭示了新漏洞和利用的发展趋势&#xff0c;以及攻击者最常利用的漏洞概述。为组织获悉和应对相关威胁提供了有价值的见解。 已注册漏洞统计数据 为了…

大企业总部与分部组网方案

在全球化的经济环境中&#xff0c;大企业往往设有总部和多个地理分散的分部。为了确保信息的快 速流通、资源的优化配置以及管理的高效运作&#xff0c;构建一个稳定、安全且高效的组网方案显 得尤为重要。本文将探讨大企业如何通过技术手段和管理策略&#xff0c;实现总部与分…

常见加解密算法03 - RC4逆向认识

各位聪明绝顶&#xff0c;才高八斗的读者们你们好&#xff01;今天我们主要讨论编译之后的RC4算法识别。 题外话&#xff0c;之前看到一个蛋疼的小知识&#xff0c;说“势”这个字最好不好查词典释义。我是很好奇的&#xff0c;果然后来无法直视势不可挡这个成语。 言归正传&am…

Python tensor向量维度转换,不同维度的向量转化为相同的维度,经过全连接层MLP的维度转换,代码实战

问题&#xff1a;在机器学习特征工程中&#xff0c;假如每类特征需要转化为相同的维度进行拼接&#xff0c;那该怎么办呢&#xff1f;接一个全连接层MLP就可以了。 例子&#xff1a;将&#xff08;128,64&#xff09; 维度的向量转化为&#xff08;128,32&#xff09;维。 impo…

安装ps提示找不到msvcp140.dll,无法继续执行此代码如何修复

MSVCP140.dll&#xff0c;作为Windows操作系统中的一个关键组件&#xff0c;扮演着不可或缺的角色&#xff0c;尤其对于基于C开发的应用程序而言。本文旨在深入探讨这一动态链接库文件的功能、重要性、常见问题及解决方案&#xff0c;为您提供全面的MSVCP140.dll指南。 一、MSV…

zookeeper集群部署以及zookeeper原理

文章目录 简介工作原理特性官网地址准备节点准备环境准备JAVA主机映射 部署 简介 ZooKeeper是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务&#xff0c;是Google的Chubby一个开源的实现&#xff0c;是Hadoop和Hbase的重要组件。它是一个为分布式应用提供一致性服…

触摸播放视频,并用iframe实现播放外站视频

效果&#xff1a; html: <div:style"{ height: homedivh }"class"rightOne_content_div_div"mouseenter"divSeenter(i)"mouseleave"divLeave(i)"click"ItemClick(i)"><!-- isUser是否是用户上传 --><divv-if…

react18【系列实用教程】组件 (2024最新版 | 含父子组件传值、兄弟组件传值、越层组件传值、“插槽“)

什么是组件&#xff1f; 一个组件就是用户界面的一部分&#xff0c;它可以有自己的逻辑和外观。 组件之间可以互相嵌套&#xff0c;也可以复用多次 为什么要用组件&#xff1f; 组件能让开发者像搭积木一样快速构建一个完整的庞大应用&#xff0c;大大提升了开发效率&#xff…