微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > web前端 > js教程 > 正文

js 限制表单输入长度汉字为两个字符_表单特效

php中文网

发布： 2016-05-16 18:04:44

原创

1592人浏览过

将该效果整合成了一个函数，此函数接受3个参数：
第一个为textarea或其他text表单的ID；
第二个为显示输入内容的ID，可留空；
第三个为最多输入的字符，一个汉字为2个字符。
这只是一个基础效果，欢迎同学们进行优化和改进。
要获取代码请查看demo的源文件

BeatBot

BeatBot

Splash的AI音乐生成器，AI歌曲制作人！

BeatBot

165

BeatBot

<meta charset="utf-8">
<title>限制表单输入长度 汉字为两个字符</title>
<meta name="auther" content="f7">
<script> 
function lengthLimit(elem, showElem, max){ 
var elem = document.getElementById(elem); 
var showElem = document.getElementById(showElem); 
var max = max || 50;// 最大限度字符，汉字按两个字符计算 
function getTextLength(str){// 获取字符串的长度 一个汉字为2个字符 
return str.replace(/[^\x00-\xff]/g,"xx").length; 
}; 
// 监听textarea的内容变化 
if(/msie (\d+\.\d)/i.test(navigator.userAgent) == true) {// 区分IE 
elem.onpropertychange = textChange; 
}else{ 
elem.addEventListener("input", textChange, false); 
} 
function textChange(){// 内容变化时的处理 
var text = elem.value; 
var count = getTextLength(text); 
if(count > max){// 文字超出截断 
for(var i=0; i<text.length; i++){ 
if(getTextLength(text.substr(0, i)) >= max){ 
elem.value = text.substr(0, i); 
if(showElem) showElem.innerHTML = elem.value;// 显示输出结果 
break; 
}; 
} 
}else{ 
if(showElem) showElem.innerHTML = elem.value;// 显示输出结果 
}; 
}; 
textChange();// 加载时先初始化 
}; 
</script><textarea name="textarea" id="commentText" style="width:500px; height:150px;"> 最多输入20个汉字 
<input type="button" value="JS添加内容" onclick="document.getElementById('commentText').value = '您想说dasdsadsad的话！请输5325135353入您想说的'; lengthLimit('commentText', 'dsa', 40);"><div id="dsa"></div> 
<script type="text/javascript"> 
lengthLimit("commentText", "dsa", 40); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

大家都在看：

JavaScript对象池_资源复用优化策略解决Flask中AJAX文件上传时request.files为空的问题移动端JavaScript_手势识别实现 JavaScript复杂度分析_时间与空间权衡 Angular数据列表多字段模糊搜索实现指南

最佳 Windows 性能的顶级免费优化软件

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

来源：php中文网

上一篇：JS 自定义带默认值的函数_javascript技巧下一篇：TreeView 用法（有代码）（asp.net）_javascript技巧

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

JavaScript数据结构_图算法实现图由顶点和边组成，可用邻接表或矩阵表示；JavaScript中常用邻接表实现无向图。1.广度优先搜索（BFS）使用队列逐层遍历，适合查找未加权图的最短路径。2.深度优先搜索（DFS）通过递归或栈深入遍历，适用于连通分量与拓扑排序。3.Dijkstra算法利用优先队列计算带权图的单源最短路径，维护距离表并持续更新邻居节点的最短距离。

2025-11-23 21:34:57

232

JavaScript性能优化_代码分割代码分割通过将大JS文件拆分为小块并按需加载，减少首屏加载时间。它利用构建工具如Webpack或Vite，结合路由实现懒加载，例如React的React.lazy与Suspense、Vue的动态导入。基于路由时，每个页面组件独立打包，访问时才加载；按功能可分离重型模块如地图或编辑器；第三方库可用splitChunks提取公共依赖。还可通过preload预加载关键资源，prefetch在空闲时预取后续模块，提升性能。关键是区分优先级，合理配置以优化加载时机。

2025-11-23 21:34:02

903

解决Node.js应用在Railway平台连接MySQL数据库的常见问题本教程旨在解决Node.js应用在Railway平台部署时，连接MySQL数据库可能遇到的ETIMEDOUT和ENOTFOUND错误。文章将详细指导如何通过引入mysql2/promise连接池、利用环境变量安全管理数据库凭证，并采用async/await语法优化数据库操作，从而建立稳定可靠的数据库连接。

2025-11-23 21:33:23

490

现代JavaScript_数字分隔符数字分隔符用下划线提升大数可读性，如1_000_000；支持十进制、二进制、八进制、十六进制和科学计数法；不能在首尾、连续使用或紧邻小数点及e符号。

2025-11-23 21:30:58

192

JavaScript移动开发_ReactNative混合应用架构 ReactNative通过JSX转原生组件实现跨平台开发，采用JavaScript线程、原生UI线程与通信桥三线程架构，支持分层设计与原生交互，结合Expo、FastRefresh等工具提升开发效率，适合多平台快速迭代团队。

2025-11-23 21:28:02

138

JavaScript组件化_WebComponents标准实践 WebComponents通过CustomElements、ShadowDOM和HTMLTemplates实现原生组件化。CustomElements允许创建带行为的自定义标签，需继承HTMLElement并用customElements.define注册，标签名必须含短横线。ShadowDOM通过attachShadow提供隔离的DOM和样式，mode为‘open’可访问shadowRoot，‘closed’则不可，内部使用分发内容。HTMLTemplates定义不渲染的模板结构，可在JS中克

2025-11-23 21:20:02

195

深入JavaScript_执行上下文与作用域链执行上下文分为全局、函数和eval三种，创建阶段确定this、词法环境和变量环境，作用域链由词法环境构成，逐层查找变量，闭包利用作用域链访问外部变量，let/const引入块级作用域和暂时性死区，共同决定变量访问与生命周期。

2025-11-23 21:20:02

750

JavaScript设计模式_状态模式状态模式通过封装不同状态下的行为使对象在状态改变时改变其行为。以电灯为例，关态（OffState）按下开关变为开态（OnState），反之亦然；上下文（Light）持有当前状态并委托调用pressSwitch方法实现状态切换。核心角色包括Context（如Light类）、State接口及ConcreteState（如OnState、OffState）。优势在于消除冗长条件判断，提升可维护性，适用于订单状态、游戏角色动作等有限状态机场景。

2025-11-23 21:19:36

664

JavaScript性能调优_防抖与节流防抖指事件频繁触发时仅执行最后一次，适用于搜索联想等场景；节流则保证在固定时间间隔内最多执行一次，适合滚动监听等连续操作，两者均通过降低函数执行频率提升性能。

2025-11-23 21:13:04

813

JavaScript网络安全_XSS与CSRF防护策略 XSS通过注入恶意脚本窃取数据，需过滤输入、编码输出、使用CSP及HttpOnlyCookie；CSRF伪造用户请求，需验证Origin、使用Anti-CSRFToken、设置SameSiteCookie并增加二次验证。

2025-11-23 21:10:02

515

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

php初学者入门课程

5376次学习
收藏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部