JS(javascript)动态判断输入文本框剩余可输入字符数

article/2025/3/5 0:58:24

一、描述

我们在空间中发表状态,当我们输入一个字符,上面的剩余可输入字符数就会减一,直到输入的字符数达到之前设定的最大数量为止,效果如下图所示:


二、实现方法

首先,我们先确定文本框内的最大可输入长度,其次在输入一个字符抬起键盘的时候对输入文本框中的字符长度进行验证,并在动态显示在剩余可输入字符数中。

三、源代码

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%><%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>版块</title><style type="text/css">
.pbt {margin-bottom: 10px;
}
.ie6 .pbt .ftid a, .ie7 .pbt .ftid a {margin-top: 1px;
}
.cl:after {clear: both;content: ".";display: block;height: 0;visibility: hidden;
}
</style>
<script type="text/javascript">	//光标离开这个textField就验证该文本框是否为空function check(){		   var forumPost = document.getElementById("subject");var forumPostName = forumPost.value;var subjectchkRule = document.getElementById("subjectchk");var postNameRule = document.getElementById("postNameRule");postNameRule.style.color="#FF0000";if(forumPostName == ""){subjectchkRule.style.display="none";postNameRule.style.display="none";postNameRule.innerHTML="*帖子标题不能为空";forumPost.focus();					}else{postNameRule.innerHTML="";}			}// 只要键盘一抬起就验证编辑框中的文字长度,最大字符长度可以根据需要设定function checkLength(obj)  { var maxChars = 80;//最多字符数     var curr = maxChars - obj.value.length; if( curr > 0 ){document.getElementById("checklen").innerHTML = curr.toString(); }else{document.getElementById("checklen").innerHTML = '0';document.getElementById("subject").readOnly=true;}} </script>
</head>
<body><div class="pbt cl">								<s:textfield name="mcpForumPost.postTitle" id="subject" size="80" maxlength="80" theme="simple" οnblur="check()"  οnkeyup="checkLength(this)"  accessKey="1" tabindex="11"></s:textfield><span id="subjectchk">还可输入<strong id="checklen" style="color:#FF0000">80</strong>个字符</span><span id="postNameRule" class="spn_flag_1" style="display:none" ></span></div>
</body>	
</html>



http://chatgpt.dhexx.cn/article/cXQxmCxv.shtml

相关文章

js/javascript 操作字符串【全】(含常用的操作字符串的lodash)

创建字符串 "" let str "字符串的内容" 特殊符号使用\进行转义 \" 表示 "\ 表示 \n 表示换行\r 表示回车\t 表示制表符\b 表示空格\\ 表示\ 还可以使用转义字符输入Unicode编码 console.log(\u2600) 网页中使用Unicode编码&#xff0c;格式…

13.JS输出内容和语法

“也许世界上也有五千朵和你一模一样的花&#xff0c;但是你是我独一无二的玫瑰。” ——《小王子》 JS输出内容和语法 1.JS显示内容有哪些方式2.使用window.alert()3.使用document.write()和innerHTML4.使用console.log()5.JavaScript 字面量(1)数字(2)字符串(3)表达式(4)数组…

js每次在输入框中输入时,在控制台输出所输入的字符串的长度(keyup)

js每次在输入框中输入时&#xff0c;在控制台输出所输入的字符串的长度&#xff08;keyup&#xff09;&#xff1a;需要捕捉每一次的键盘释放时的事件&#xff0c;返回输入框的长度 代码如下&#xff1a; html代码&#xff1a; js代码&#xff1a; 结果&#xff1a;

js如何识别出字符串中的回车 \n并输出换行

首先&#xff0c;关于\n,\r,\r\n的区别请看这里 关于/r与/n 以及 /r/n 的区别总结_long for us-CSDN博客 1.字符串中有“↵”符号 像这样的 var str"英雄联协议↵ ↵ 在您向英雄联APP..." 这种只需要正则替换回车符就行了 str str.replace(/↵/g,"<…

js解析excel文件,读取单元格中的值

首先需要引入js包&#xff0c;https://github.com/SheetJS/sheetjs这个是地址 我这里就具体说一下读取单元格值的方法。 方法参考js读取本地Excel内容 这个博主的&#xff0c;但是想要获取具体的一行数据&#xff0c;需要写XLSX.utils.sheet_to_json将表格数据转化为json格式&a…

node.js、js读取excel、操作excel、创建excel之js-xlsx.js

node.js篇 第一步引入包 npm install xlsx -save 第二步使用 var xl require(xlsx); //workbook 对象&#xff0c;指的是整份 Excel 文档。我们在使用 js-xlsx 读取 Excel 文档之后就会获得 workbook 对象。 var workbook xl.readFile("public/temp/标题说明.xlsx&qu…

【js】读取Excel文件(xlsx格式),并用表格(table)展示数据

1、效果 2、下载xlsx.mini.js GitHub上有一个读取Excel文件的项目 https://github.com/SheetJS/sheetjs 因为我只是想要读取xlsx文件&#xff0c;故只下载了项目里的一个xlsx.mini.js文件 3、主要代码 <script type"text/javascript" src"js/xlsx.mini.js…

前端使用xlsx.core.min.js读取excel内容

导入Excel格式 引用xlsx.core.min.js <script src"~/Scripts/xlsx.core.min.js"></script>HTML代码 <input typebutton onclickDR(this) value导入 /> <input typefile idfile onchangeimportf(this) hidden />JS代码 //导入 function DR…

纯js读取excel文件内容,支持所有刘浏览器

js如何将读取excel文件内容 template.html <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8"> <title>JS-XLSX Live Demo</title> <link href"../css/bootstrap.min.css" rel…

【Js】前端使用xlsx.full.min.js读取和导出excel表格数据

文章目录 简介使用js-xlsx的xlsx.full.min.js读取导出 来源 简介 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库&#xff0c;功能强大&#xff0c;支持格式众多&#xff0c;支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。…

Vue使用js读取Excel数据

JS读取Excel数据 为什么要导入Excel数据&#xff0c;在所有的系统中几乎都会涉及到添加数据功能&#xff0c;添加数据有两种方法&#xff0c;第一种就是手动输入&#xff0c;一次只能输入一条数据。另一种就是通过导入excel文件实现多条数据的添加。 接下来我们就通过一个例子…

前端js读取excel工作表格数据

首先 需要两个js文件 jquery.min.js 线上地址 https://cdn.bootcss.com/jquery/3.2.1/jquery.js xlsx.core.min.js 线上地址 https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js 还是建议弄到本地&#xff0c;因为如果线上地址发生变化就出问题了&#xff0c;搞到本地可以保…

使用xlsx.full.min.js读取excel表格数据

话不多说&#xff0c;直接上图 excel 数据是这样的 结果是这样的 代码如下&#xff0c;需要引入xlsx.full.min.js 下载地址 <!doctype html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport"cont…

js读取excel,xlsx,xls 表格,转成JSON数据

js读取excel,xlsx,xls 表格&#xff0c;转成JSON数据 使用 js-xlsx 插件&#xff1a;https://github.com/SheetJS/js-xlsx转为JSON数据后的效果图 欢迎参考 使用 js-xlsx 插件&#xff1a;https://github.com/SheetJS/js-xlsx HTML内容 创建input type为file 文件上传格式 绑…

JavaScript 技术篇 - js读取Excel文档里的内容实例演示,js如何读取excel指定单元格的内容,js将excel的内容转化为json字符串方法

JavaScript 读取 Excel 文档里的内容实例演示 第一章&#xff1a;准备① 下载 xlsx.full.min.js 支持包第二章&#xff1a;功能实现与使用演示① 实现代码② 使用效果演示③ 获取指定单元格的内容④ 将读取的 Excel 内容转化为 json 字符串 第一章&#xff1a;准备 ① 下载 xl…

JavaScript怎样读取本地Excel文件

在浏览器中&#xff0c;使用JavaScript读取本地文件内容&#xff0c;支持Excel表格(.xls、.xlsx)和文本文件(.txt)两种格式。 首先创建一个Excel表格&#xff0c;其中第一行为字段名。 在浏览器的项目管理器中&#xff0c;创建自定义变量步骤&#xff0c;并依次添加姓名…

如何使用JavaScript实现纯前端读取和导出excel文件

js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库&#xff0c;功能强大&#xff0c;支持格式众多&#xff0c;支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。 官方github&#x…

使用JavaScript实现纯前端读取excel文件并与后台进行交互

下载SheetJS文件 GitHub下载地址&#xff1a;https://github.com/SheetJS/sheetjs 下载之后打开其中的dist文件目录&#xff0c;能看到其中有xlsx.core.min.js和xlsx.full.min.js两个JS文件&#xff0c;使用其中一个文件就行&#xff0c;一般情况下使用xlsx.core.min.js就可以…

学习写需求分析

笔者本身是软件工程专业出身&#xff0c;但是对如何写需求分析仍然是一知半解&#xff0c;拿到需求&#xff0c;仍然不知道如何下手&#xff0c;才能达到写需求分析的目的。 今天看到一篇文章&#xff0c;让我受益良多&#xff0c;同时参考此文&#xff0c;笔者也尝试写了一个…

Java Web 课程设计需求分析文档

企业办公软件管理需求分析 一、引言 1.1编写目的 软件需求分析是为了使用户和软件开发人员双方对该软件的初始规定有一个共同的理解,使之成为整个软件开发工作的基础.就本项目而言&#xff0c;编写需求分析报告的主要目的是明确系统各部分需要完成的功能&#xff0c;了解系统…