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

2024-12-15 21:35:47

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

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

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

看下面的代码：

<textarea name="text" id="text" maxlength="600"></textarea>
<p><span id="already"></span>/<span>600</span></p>
text.oninput = function() {
  already.textContent = text.value.length;
}

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

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

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

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属性

<script language="javascript" type="text/javascript">
function textlen(x,y){
 var thelength = x.value.length;
 window.status=thelength+' of '+y+' maximum characters.';
}
function maxtext(x,y){
 tempstr = x.value
 if(tempstr.length>y){
  x.value = tempstr.substring(0,y);
 }
 textlen(x,y);
}
</script>
<form name="myform">
   <textarea name="mytextarea"
              cols="45"
              rows="3"
              wrap="virtual"
              onkeypress="return(this.value.length<20)"
              onkeydown="textlen(this,20)"
              onkeyup="textlen(this,20)"
              onblur="maxtext(this,20)">
   </textarea>
</form>

JQuery为textarea添加maxlength属性的代码

通过JQuery的keyup事件: 复制代码代码如下: <html> <head> <title>JQuery为textarea添加maxlength</title> <script type="text/javascript" src="jquery-1.4.js"></script> </head> <body> <textarea style="w
TextArea设置MaxLength属性最大输入值的js代码

标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用,只有当事件发生时才起作用如下:http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp 但TEXT中有且起作用<input type="text" maxlength="20">, 那么在TEXTAREA中怎么实现输入内容不能超过多少个字符呢. 方法1.如果只需要截取多少个字符
TextArea不支持maxlength的解决办法(jquery)

用.net 控件久了,在给一个页面的TextBox 增加控制长度的控制时,简单的加了一个maxlength='xxx' 就行,可是测试确总是不过,原因是设置了多行模式,在这样的情况下生成的html代码就是textarea,同时maxlength属性就没有被增加上,因为IE不支持textarea 的 maxlength属性,于是,在firefox 6中测试,发现firefox是支持这个属性的.那么就简单了.自己写了一个jquery的扩展,这样就可以很容易实现对textarea控制最大长度了. 扩展
JQuery为textarea添加maxlength属性并且兼容IE

// JQuery为textarea添加maxlength // textarea默认不支持maxlength属性. // 通过JQuery的keyup事件: JQuery代码如下: 复制代码代码如下: <script type="text/javascript"> $(function(){ //IE也能用textarea $("textarea[maxlength]").keyup(function(){ var area=$(this); var
textarea不能通过maxlength属性来限制字数的解决方法

textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求. 通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制,简单而实用.假设我们有一个id为 txta1 的textarea文本区,我们可以通过以下代码限制它的键盘输入字数为10个字(汉字或其他小角字符): <script language="#"
详解maxlength属性在textarea里奇怪的表现

HTML5给表单带来了很多改变,比如今天要说的maxlength,这个属性可以限制输入框输入的最大字字符数,更方便的是对于粘贴的内容也能够根据字符数自动截断. 最近就接到这要一个需求,限制用户最多输入600字(汉字和字母不区分),对于粘贴的内容也要能自动截断,输入600字后就无法输入. 第一时间想到了maxlength,基本满足需求,但还是有一些怪异的表现. 看下面的代码: <textarea name="text" id="text" maxlength=&
详解.NET Core 3.0 里新的JSON API

为什么需要新的 JSON API ? JSON.NET 大家都用过,老版本的 ASP.NET Core 也依赖于 JSON.NET . 然而这个依赖就会引起一些版本问题:例如 ASP .NET Core某个版本需要使用 JSON .NET v10 ,而另一个库需要使用 JSON.NET v11 :或者 JSON .NET 出现了一个新版本,而ASP .NET Core 还不能支持这个版本,而您却想使用该版本. System.Text.Json 随着 NET Core 3.0 的
深入详解JS函数的柯里化

一.补充知识点之函数的隐式转换来一个简单的思考题. function fn() { return 20; } console.log(fn + 10); // 输出结果是多少? 稍微修改一下,再想想输出结果会是什么? function fn() { return 20; } fn.toString = function() { return 10; } console.log(fn + 10); // 输出结果是多少? 还可以继续修改一下. function fn() { return 20;
图文详解Android属性动画

Android中的动画分为视图动画(View Animation).属性动画(Property Animation)以及Drawable动画.从Android 3.0(API Level 11)开始,Android开始支持属性动画,本文主要讲解如何使用属性动画.关于视图动画可以参见博文<Android四大视图动画图文详解>. 一.概述视图动画局限比较大,如下所述: 1.视图动画只能使用在View上面. 2.视图动画并没有真正改变View相应的属性值,这导致了UI效果与实际View状态存在差异
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolve: { extensions: ['', '.js', '.vue'], fallback: [path.j
详解JS中的柯里化(currying)

何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字命名). 柯里化通常也称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是逐步传参,逐步缩小函数的适用范围,逐步求解的过程. 柯里化一个求和函数按照分步求值,我们看一个简单的例子 var concat3Words = function (
spring-core组件详解——PropertyResolver属性解决器

PropertyResolver属性解决器,主要具有两个功能: 通过propertyName属性名获取与之对应的propertValue属性值(getProperty). 把${propertyName:defaultValue}格式的属性占位符,替换为实际的值(resolvePlaceholders). 注意:getProperty获取的属性值,全都是调用resolvePlaceholders进行占位符替换后的值. 组件体系图如下: PropertyResolver接口: 该接口定义了组件所具
Android获取arrays.xml里的数组字段值实例详解

Android获取arrays.xml里的数组字段值实例详解比如在arrays.xml里:  <string-array name="reboot_item"> <item>Reboot</item> <item>Recovery</item> <item>BootLoader</item> </string-array&g
Pandas数据结构中Series属性详解

目录 Series属性 Series属性列表 Series属性详解 Series属性 Series属性列表属性说明 Series.index 系列的索引(轴标签) Series.array 系列或索引的数据 Series.values 系列的数据,返回ndarray Series.dtype 返回基础数据的数据类型 Series.shape 返回基础数据形状的元组 Series.nbytes 返回基础数据占的字节数 Series.ndim 基础数据的维数,永远是1 Series.size 返
java 基础教程之多线程详解及简单实例

java 多线程详解在这篇文章里,我们关注多线程.多线程是一个复杂的话题,包含了很多内容,这篇文章主要关注线程的基本属性.如何创建线程.线程的状态切换以及线程通信. 线程是操作系统运行的基本单位,它被封装在进程中,一个进程可以包含多个线程.即使我们不手动创造线程,进程也会有一个默认的线程在运行. 对于JVM来说,当我们编写一个单线程的程序去运行时,JVM中也是有至少两个线程在运行,一个是我们创建的程序,一个是垃圾回收. 线程基本信息我们可以通过Thread.currentThread()方法

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

相关推荐

随机推荐