`
zzx0421
  • 浏览: 98986 次
  • 性别: Icon_minigender_1
  • 来自: 株洲/深圳
社区版块
存档分类
最新评论

限制textarea文本域中输入字符个数(防粘贴功能)

IE 
阅读更多
通常我们需要对用户文本输入进行字符数量上的限制,对于<input type="text" value="" />文本输入域,我们可以通过maxlength属性来限制用户可输入的最大字符数,但是textarea这种文本输入域的话我们只能通过js来控制输入字符数了,因为它没有提供maxlength属性。首先我们定义一个简单的函数,如下:

/**
* 限制textarea文本域输入的字符个数
* @id        textarea表单ID
* @count 要限制的最大字符数
*/
function limitChars(id, count){
    var obj = document.getElementById(id);
    if (obj.value.length > count){
        obj.value = obj.value.substr(0, count);
    }
}

说明:这个函数的作用就是当textarea文本域中的字符数超过指定个数时即进行截取。有了这个函数,我们接下来要做的就是选择在何时调用该函数:

<textarea id="mytext" cols="" rows="" onkeydown="limitChars(''mytext'', 120)" onchange="limitChars(''mytext'', 120)" onpropertychange="limitChars(''mytext'', 120)"></textarea>

说明:1、onkeydown监控用户键盘输入并进行字符截取;2、onchange防止用户通过复制粘贴功能输入超过指定最大字符数的字符;3、onpropertychange针对IE(FF中无效),作用就是当用户通过复制粘贴功能来进行输入时,当粘贴完成的瞬间即进行字符截取,而不是像onchange那样需要等到焦点离开textarea控件时才进行字符截取(该属性主要为了用户体验上的效果,没有该属性已经可以真正完成限制字符输入个数的任务)。

说明:这个函数的作用就是当textarea文本域中的字符数超过指定个数时即进行截取。有了这个函数,我们接下来要做的就是选择在何时调用该函数:

<textarea id="mytext" cols="" rows="" onkeydown="limitChars('mytext', 120)" onchange="limitChars('mytext', 120)" onpropertychange="limitChars('mytext', 120)"></textarea>

说明:1、onkeydown监控用户键盘输入并进行字符截取;2、onchange防止用户通过复制粘贴功能输入超过指定最大字符数的字符;3、onpropertychange针对IE(FF中无效),作用就是当用户通过复制粘贴功能来进行输入时,当粘贴完成的瞬间即进行字符截取,而不是像onchange那样需要等到焦点离开textarea控件时才进行字符截取(该属性主要为了用户体验上的效果,没有该属性已经可以真正完成限制字符输入个数的任务.
分享到:
评论

相关推荐

    jQuery插件:自动扩展文本域

    本文将深入探讨jQuery插件中的一个特定应用——“自动扩展文本域”(Auto-Expanding Textarea),该功能常用于创建动态输入框,以适应用户输入的内容增长。 在传统的HTML页面中,文本域(`&lt;textarea&gt;`)通常具有...

    textarea长度控制

    在网页开发过程中,经常需要对用户输入的数据进行限制,特别是在文本域(`textarea`)中的输入,为了确保数据的有效性和减轻服务器负担,通常会设置一个最大输入长度。本文将详细介绍如何通过HTML属性及JavaScript...

    js实现textarea限制输入字数

    与单行输入框不同,textarea没有内置的maxlength属性来限制用户输入的字符数。因此,开发者需要采用JavaScript来实现对textarea输入字数的限制。 首先,我们来讨论限制textarea字数的原理。当用户在textarea中输入...

    javaScript表单验证

    如果文本域中的内容长度超过50个字符,则弹出警告框并阻止表单提交,同时光标聚焦到文本域。 ##### 2. 只允许输入中文 使用正则表达式来过滤掉所有非中文字符。 ```html (/[^\u4E00-\u9FA5]/g,'')"&gt; ``` **解释**...

    Java记事本源代码(完整).pdf

    - `public NotePad()`:构造函数中创建了文本域`textArea`,并添加到窗口中央。接着创建了菜单栏和各个菜单项,以及相关的快捷键设置。每个菜单项都关联了一个事件监听器`listener`,当用户点击菜单项时,会触发...

    Js 表单验证大全

    - **`document.a.b.value.length`**:获取文本域中的内容长度。 - **`alert("不能超过50个字符!");`**:如果超过50个字符,则弹出警告信息。 - **`document.a.b.focus();`**:将光标定位回文本域,便于用户修改。 -...

    JS表单验证大全.doc

    - `document.a.b.value.length`:获取文本域中的文本长度。 - `alert("不能超过50个字符!")`:如果超过50个字符,则弹出提示。 - `document.a.b.focus()`:将焦点移回文本域,便于用户修改。 - `return false`...

    2022年《电子商务网页设计与制作》期末考试卷及答案.pdf

    2. 在网页中插入文本的方式灵活多样,可以直接输入,也可以从外部文档复制粘贴,还可以插入水平线和特殊字符,以增强网页的视觉效果和功能性。 3. IP地址的A类和B类通常用于公共网络,C类则常用于小型网络。D类用于...

    Java记事本源代码(完整).doc

    这个程序提供了基本的文字编辑功能,如新建、打开、保存、剪切、复制、粘贴、查找、替换以及选择全部等操作。让我们一步步剖析源代码,理解其背后的逻辑和设计。 首先,`NotePad` 类继承自 `JFrame`,这意味着它是...

Global site tag (gtag.js) - Google Analytics