`
一湖碧波
  • 浏览: 54599 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

textarea 限制字数数,并提示

阅读更多

 

textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求。

通常的做法就是使用JavaScript脚本语言来实现对textarea文本域的字数输入限制,主要思路就是先定义一个显示区域,创建键盘事件(onkeyup或onkeydown),利用函数统计字数,判断后再显示。

 

 

<p><textarea name="contents" id="contents" cols="15" rows="5" size="10" onkeyup="sizecontrol()"></textarea><span id="a">已输入字符: </span></p>

<script type="text/javascript">
var maxl=20//总长
function sizecontrol(){
   var s=document.getElementById("contents").value.length;
   if(s>maxl)document.getElementById("contents").value=document.getElementById("contents").value.substr(0,maxl)
   else document.getElementById("a").innerHTML="已输入:"+s+"/"+maxl+" 字符"
}
</script>

 

 

javascript中的substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符

注释:substr() 的参数指定的是子串的开始位置和长度,因此它可以替代 substring() 和 slice() 来使用。

重要事项:ECMAscript 没有对该方法进行标准化,因此反对使用它。在opera浏览器中使用无效。

重要事项:在 IE 4 中,参数 start 的值无效。在这个 BUG 中,start 规定的是第 0 个字符的位置。在之后的版本中,此 BUG 已被修正。

分享到:
评论
1 楼 古文字 2013-02-23  
你这个统计字数连空格也给统计了

相关推荐

    控制textarea文本长度,并限制输入字数(带统计显示)

    当`textarea`内容改变时,更新字数统计,并检查是否超出限制。如果超过,截取前100个字符并弹出警告。 这个示例只是一个基础实现,实际应用中可能需要考虑更多细节,例如: 1. **输入格式校验**:除了字数限制,还...

    jQuery textarea文本框输入文字字数限制提示代码

    本示例中,我们将探讨如何使用jQuery实现textarea文本框的字数限制功能,并实时提示用户输入的字符数量。 首先,让我们了解jQuery的基本概念。jQuery通过一个"$"符号作为入口,提供了一种简洁的方式来选择DOM元素、...

    Textarea限制输入文本长度

    ### Textarea限制输入文本长度的知识点 #### 一、前言 在Web开发过程中,为了提升用户体验并确保数据的有效性和安全性,对用户输入的数据进行适当的限制是非常必要的。特别是在表单填写场景下,如评论框、留言区等...

    效果超酷的textarea的输入字数限提示

    为了提供更好的用户体验,尤其是当需要限制用户输入的字数时,一个效果超酷的`textarea`字数限制提示可以极大地提升界面的交互性和专业性。本文将深入探讨如何通过CSS美化`textarea`,并实现动态的字数限制功能。 ...

    效果超酷的textarea的输入字数限提示.rar

    // 更新剩余字数提示 } }); ``` 在这个例子中,我们为textarea添加了一个事件监听器,当用户输入时,会更新并显示剩余的字符数。同时,如果超过了设定的最大字数,我们会截取超出部分的文本并给予用户警告。 ...

    jQuery textarea文本框输入文字字数限制提示代码.zip

    本资源“jQuery textarea文本框输入文字字数限制提示代码.zip”提供了一个实用的功能,即对textarea输入框进行字数限制,并实时显示当前已输入的字符数,这对于创建表单、评论区或任何需要限制用户输入的场景非常...

    textarea剩余字数

    `textarea`标签通常与`&lt;form&gt;`元素一起使用,以便收集用户输入的信息并将其发送到服务器进行处理。 ### 1. `&lt;textarea&gt;`的基本结构 ```html &lt;textarea id="example" name="example" rows="4" cols="50"&gt; 默认文本 ...

    Textarea输入字数限制实例(兼容iOS&安卓)

    在网页开发中,有时我们需要对用户在`&lt;textarea&gt;`元素中的输入进行限制,例如限制最多输入的字符数。本文将详细介绍如何实现一个兼容iOS和安卓设备的`&lt;textarea&gt;`输入字数限制实例。 首先,我们要明确`&lt;textarea&gt;`...

    jquery新浪发布微博textarea文本框限制文字字数表单

    以上代码会实时计算textarea中的字符数,并更新剩余字数显示。 五、优化与扩展 1. 可以添加颜色提示,当达到一定限制(如90%)时,显示警告色。 2. 添加阻止用户输入超过限制的字符功能,一旦达到最大字数,禁用...

    统计字数的textarea

    标题“统计字数的textarea”涉及的是网页开发中一个常见的需求,即在用户输入文本的textarea元素中实时显示或限制字数。这个功能在许多Web应用中都有应用,例如在线编辑器、评论系统或者表单填写等。在这个场景下,...

    js字数限制 提示

    本文将详细探讨如何在JavaScript中实现字数限制,并提供一种提示用户字数超限的方法。 首先,我们需要理解JavaScript的基本语法,它是前端开发中最常用的脚本语言,用于实现网页的动态交互。在处理字数限制时,我们...

    使用JavaScript限制TextArea多行文本域的可输入字数

    总结起来,通过JavaScript我们可以轻松地实现对`&lt;textarea&gt;`的字数限制功能,包括监听输入事件、检查字符数、限制输入以及提供实时反馈。这样的功能对于优化用户界面和提高网站质量具有重要意义。通过结合源码和工具...

    javascript textarea字数限制

    这一个是读取textarea的maxlength属性的值,进行计算,思路很好,... [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]下面的这段代码是网络上应用比较广泛的,有剩余字数提示的效果代码,推荐 JS限制textarea输入框

    手机端textarea中输入字数监控

    - **根据输入字数改变按钮样式**:如果用户输入的字数达到或超过预设的限制(此处为10个字符),则改变按钮的背景颜色以提示用户。 #### 代码解读 ```javascript // 定义一个标记变量判断是否处于输入状态 var ...

    js限制显示字数

    在限制字数时,应当考虑用户体验。可以添加提示信息,让用户知道剩余可输入的字符数,或者当达到限制时禁用提交按钮。此外,对于多行文本输入,可以使用`&lt;textarea&gt;`元素配合`rows`属性和`resize`样式来提供更好的...

Global site tag (gtag.js) - Google Analytics