0

0

js限制文本框输入长度两种限制方式(长度、字节数)_基础知识

php中文网

php中文网

发布时间:2016-05-16 17:46:09

|

2338人浏览过

|

来源于php中文网

原创

功能/特点
1.实时显示可输入的字数(字节数)
2.两种限制方式(长度、字节数)
3.中文输入法下可正常使用,无BUG
4.同一页面可以使用多个,相互不干扰
limit.js
复制代码 代码如下:

function limit(){
var txtNote;//文本框
var txtLimit;//提示字数的input
var limitCount;//限制的字数
var isbyte;//是否使用字节长度限制(1汉字=2字符)
var txtlength;//到达限制时,字符串的长度
var txtByte;
this.init=function(){
txtNote=this.txtNote;
txtLimit=this.txtLimit;
limitCount=this.limitCount;
isbyte=this.isbyte;
txtNote.onkeydown=function(){wordsLimit()};txtNote.onkeyup=function(){wordsLimit()};
txtLimit.value=limitCount;
}
function wordsLimit(){
var noteCount=0;
if(isbyte){noteCount=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length}else{noteCount=txtNote.value.length}
if(noteCount>limitCount){
if(isbyte){
txtNote.value=txtNote.value.substring(0,txtlength+Math.floor((limitCount-txtByte)/2));
txtByte=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length;
txtLimit.value=limitCount-txtByte;
}else{
txtNote.value=txtNote.value.substring(0,limitCount);
txtLimit.value=0;
}
}else{
txtLimit.value=limitCount-noteCount;
}
txtlength=txtNote.value.length;//记录每次输入后的长度
txtByte=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length;
}
}

页面调用:
复制代码 代码如下:




还可输入个字符





文本框限制字符长度
复制代码 代码如下:



上面这样写只能限制输入的一定是数字 和最大长度为11个字符 如何限制一定要输入11位 不能少也不能多
------解决方案--------------------------------------------------------
你确定上面的写法对吗。。。测试怎么通不过呢。。
不对吗 测试那里不对 这个现在只是限制输入一定是数字和11个字符
------解决方案--------------------------------------------------------
复制代码 代码如下:



上面这样写只能限制输入的一定是数字 和最大长度为11个字符 如何限制一定要输入11位 不能少也不能多
------解决方案--------------------------------------------------------
复制代码 代码如下:



上面这样写只能限制输入的一定是数字 和最大长度为11个字符 如何限制……
------解决方案--------------------------------------------------------
复制代码 代码如下:

if(document.form.mobile.value=="")
{
alert("您输入错误");
document.forma.mobile.focus();
return false;
}
else
{
if(!/^\d{11}$.test(document.form.mobile.value))
{alert("您输入数字的位数不对");
document.forma.mobile.focus();
return false;
}
}

不知道这样行不行。。。
------解决方案--------------------------------------------------------
HTML code
复制代码 代码如下:




控制textarea的字符个数











Komo Search
Komo Search

Komo Search 是一个生成式AI驱动的搜索引擎

下载





------解决方案--------------------------------------------------------
HTML code
复制代码 代码如下:




电话号码检测






电话号码:




------解决方案--------------------------------------------------------
复制代码 代码如下:



上面这样写只能限制输入的一定是数字 和最大长度为11个字符 如何限制……
这样是可以有个提示,但并没起到限制作用,,当输入少于11位 还是可以提交的,这个是不是要用js来控制的呢

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Docker容器化部署与DevOps实践
Docker容器化部署与DevOps实践

本专题面向后端与运维开发者,系统讲解 Docker 容器化技术在实际项目中的应用。内容涵盖 Docker 镜像构建、容器运行机制、Docker Compose 多服务编排,以及在 DevOps 流程中的持续集成与持续部署实践。通过真实场景演示,帮助开发者实现应用的快速部署、环境一致性与运维自动化。

0

2026.02.11

Rust异步编程与Tokio运行时实战
Rust异步编程与Tokio运行时实战

本专题聚焦 Rust 语言的异步编程模型,深入讲解 async/await 机制与 Tokio 运行时的核心原理。内容包括异步任务调度、Future 执行模型、并发安全、网络 IO 编程以及高并发场景下的性能优化。通过实战示例,帮助开发者使用 Rust 构建高性能、低延迟的后端服务与网络应用。

1

2026.02.11

Spring Boot企业级开发与MyBatis Plus实战
Spring Boot企业级开发与MyBatis Plus实战

本专题面向 Java 后端开发者,系统讲解如何基于 Spring Boot 与 MyBatis Plus 构建高效、规范的企业级应用。内容涵盖项目架构设计、数据访问层封装、通用 CRUD 实现、分页与条件查询、代码生成器以及常见性能优化方案。通过完整实战案例,帮助开发者提升后端开发效率,减少重复代码,快速交付稳定可维护的业务系统。

3

2026.02.11

包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法
包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法

本专题汇总了包子漫画官网和网页版入口,提供最新章节抢先看方法、正版免费阅读指南,以及稳定访问方式,帮助用户快速直达包子漫画页面,无广告畅享全集漫画内容。

137

2026.02.10

MC.JS网页版快速畅玩指南_MC.JS官网在线入口及免安装体验方法
MC.JS网页版快速畅玩指南_MC.JS官网在线入口及免安装体验方法

本专题汇总了MC.JS官网入口和网页版快速畅玩方法,提供免安装访问、不同版本(1.8.8、1.12.8)在线体验指南,以及正版网页端操作说明,帮助玩家轻松进入MC.JS世界,实现即时畅玩与高效体验。

80

2026.02.10

谷歌邮箱网页版登录与注册全指南_Gmail账号快速访问与安全操作教程
谷歌邮箱网页版登录与注册全指南_Gmail账号快速访问与安全操作教程

本专题汇总了谷歌邮箱网页版的最新登录入口和注册方法,详细提供官方账号快速访问方式、网页版操作教程及安全登录技巧,帮助用户轻松管理Gmail邮箱账户,实现高效、安全的邮箱使用体验。

65

2026.02.10

铁路12306订票与退改全攻略_高效购票与座位选取技巧
铁路12306订票与退改全攻略_高效购票与座位选取技巧

本专题全面汇总铁路12306订票、退票、改签及候补订单操作技巧,提供车厢座位分布参考、抢票攻略和高铁安检注意事项,帮助新手用户快速掌握高效购票与退改流程,提高出行效率和体验。

78

2026.02.10

TensorFlow2深度学习模型实战与优化
TensorFlow2深度学习模型实战与优化

本专题面向 AI 与数据科学开发者,系统讲解 TensorFlow 2 框架下深度学习模型的构建、训练、调优与部署。内容包括神经网络基础、卷积神经网络、循环神经网络、优化算法及模型性能提升技巧。通过实战项目演示,帮助开发者掌握从模型设计到上线的完整流程。

1

2026.02.10

Vue3组合式API与组件开发实战
Vue3组合式API与组件开发实战

本专题讲解 Vue 3 组合式 API 的核心概念与应用技巧,深入分析响应式系统、生命周期管理、组件设计与复用策略。通过完整项目案例,指导前端开发者实现高性能、结构清晰的 Vue 应用,提升开发效率与代码可维护性。

13

2026.02.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1万人学习

550W粉丝大佬手把手从零学JavaScript
550W粉丝大佬手把手从零学JavaScript

共1课时 | 0.4万人学习

进程与SOCKET
进程与SOCKET

共6课时 | 0.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

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