0

0

详解maxlength属性在textarea里奇怪的表现_javascript技巧

php中文网

php中文网

发布时间:2016-05-16 15:23:20

|

1959人浏览过

|

来源于php中文网

原创

html5给表单带来了很多改变,比如今天要说的maxlength,这个属性可以限制输入框输入的最大字字符数,更方便的是对于粘贴的内容也能够根据字符数自动截断。

最近就接到这要一个需求,限制用户最多输入600字(汉字和字母不区分),对于粘贴的内容也要能自动截断,输入600字后就无法输入。

第一时间想到了maxlength,基本满足需求,但还是有一些怪异的表现。

看下面的代码:


/600

立即学习Java免费学习笔记(深入)”;

text.oninput = function() { already.textContent = text.value.length; }

上述代码中限制输入字符数为600,并通过oninput监听用户的输入,没有用keydown,因为keydown只能监听用户键盘输入,对于粘贴没有反应。。。oninput可以做到。

这时候直接输入600字后就不再可以输入,删除一些,再输入一些,表现正常。奇怪的是如果你粘贴进textarea里一大堆文字,以为maxlength的存在自动截断,此时textarea里正好有600个字符,这时候你删除一些字符,然后再尝试输入,你会发现:

卧槽,无法输入了!!!再删的多一些,这时可以继续输入,但是!!!在输入还不到600字符的时候,突然又不能输入了!!!

小鸽子助手
小鸽子助手

一款集成于WPS/Word的智能写作插件

下载

chrome下以及我的android机器下都会这样。。暂时不知道原因。测试了下input,不会有这样的情况出现,而且maxlength属性的值小一点的话就不会有这种情况,比如10。。。

这样的话maxlength就不靠谱了,就自己多写点代码吧,既然oninput这么灵活,就用它了。

修改下代码,去掉textarea的maxlength属性,使用input监听textarea的value值,超过600就自动截断,造成一种无法输入的错觉。

text.oninput = function() {
  if(text.value.length >= 600) {
    text.value = text.value.substr(0,600);
  }
  already.textContent = text.value.length;
}

不放心的话,可以继续监听keydown事件,在输入大于600字符后阻止默认事件,但是有几个键是不能禁止的:删除退格和回车:

text.onkeydown = function() {
  if(text.value.length >= 600) {
    // 删除:46 退格:8 回车:13
    if (!(e.which == '46' || e.which == '8' || e.which == '13')) {
      e.preventDefault();
    }
   }
}

IE8以下不支持maxlength属性,也不支持oninput,但是他们有一个更强大的方法:onpropertychange。

下面通过一端代码讲解textarea实现maxlength属性

 

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
PHP Swoole 高性能服务开发
PHP Swoole 高性能服务开发

本专题聚焦 PHP Swoole 扩展在高性能服务端开发中的应用,系统讲解协程模型、异步IO、TCP/HTTP/WebSocket服务器、进程与任务管理、常驻内存架构设计。通过实战案例,帮助开发者掌握 使用 PHP 构建高并发、低延迟服务端应用的工程化能力。

0

2026.02.02

Java JNI 与本地代码交互实战
Java JNI 与本地代码交互实战

本专题系统讲解 Java 通过 JNI 调用 C/C++ 本地代码的核心机制,涵盖 JNI 基本原理、数据类型映射、内存管理、异常处理、性能优化策略以及典型应用场景(如高性能计算、底层库封装)。通过实战示例,帮助开发者掌握 Java 与本地代码混合开发的完整流程。

0

2026.02.02

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

61

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

52

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

25

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

10

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

7

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

416

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

233

2026.01.31

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
AngularJS教程
AngularJS教程

共24课时 | 3.2万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.2万人学习

PHP基础入门课程
PHP基础入门课程

共33课时 | 2万人学习

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

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