`
mutongwu
  • 浏览: 448508 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

textarea 限制字数输入

 
阅读更多
<form action="" id="commentForm" name="commentForm" method="POST">
    <textarea id="commentText" name="commentText" rows="4" cols="50" maxNum="500"></textarea>
    <p class="c-tip"><input id="subBtn" class="btn" type="submit" value="点评" disabled="true"></input>限1~500字之内,还可以输入<span id="num" class="number">500</span>字</p>
</form>

textarea{width:98%;height:80px;_width:490px;overflow-y:auto;}
.c-tip .number{color:#f56600;}
.c-tip .btn{float:right;}

   var commentText = document.getElementById('commentText'),
        num = document.getElementById('num'),
        maxNum = commentText.getAttribute('maxNum'),
        subBtn = document.getElementById('subBtn');
    subBtn.setAttribute('disabled',true);
    
    var changeFn = function(){
        var val = commentText.value;
        if(val){
            val = val.replace(/^\s+|\s+$/g,'');
        }
        if(val.length == 0){
            subBtn.setAttribute('disabled',true);
        }else{
	        if(val.length > maxNum){
	            subBtn.setAttribute('disabled',true);
	        }else{
	            subBtn.removeAttribute('disabled');
	        }
        }
        num.innerHTML = (maxNum - val.length);
    };
    if(/MSIE ([^;]+)/.test(navigator.userAgent)){
           commentText.onpropertychange = changeFn;
    }else{
        commentText.addEventListener('input',changeFn,false);
    }
    commentText.onkeyup = changeFn;
分享到:
评论

相关推荐

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

    以下是一个简单的示例,展示了如何限制`textarea`的最大输入字数: ```html &lt;!DOCTYPE html&gt; 限制textarea输入字数 #charCount { display: inline-block; margin-left: 5px; } &lt;textarea id="input...

    js实现textarea限制输入字数

    实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过...

    Textarea限制输入文本长度

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

    angularjs实现textarea文本输入字数限制功能

    在本文中,我们将深入探讨如何使用AngularJS框架来实现一个textarea文本输入的字数限制功能。AngularJS,作为一款强大的前端开发框架,以其双向数据绑定和丰富的指令系统著称,可以方便地帮助开发者构建功能丰富的...

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

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

    textarea剩余字数

    在HTML5中,可以使用`pattern`属性添加正则表达式验证,限制用户输入的格式。例如,只允许输入数字: ```html &lt;textarea name="numbersOnly" pattern="\d*"&gt;&lt;/textarea&gt; ``` ### 7. jQuery与JavaScript库的扩展 ...

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

    本文将详细介绍如何实现一个兼容iOS和安卓设备的`&lt;textarea&gt;`输入字数限制实例。 首先,我们要明确`&lt;textarea&gt;`是HTML中用于创建多行文本输入的元素,通常用于收集用户的大段文字输入,如评论、反馈或表单中的长...

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

    //显示限制输入字符method function textAreaChange(obj){ var $this = $(obj); var count_total = $this.next().children('span').text(); var count_input = $this.next().children('em'); var area_...

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

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

    利用Angular.js限制textarea输入的字数

    大家可能都遇到过在输入的时候做出限制的需求,本文介绍的是通过Angular.js限制textarea输入字数的方法,有需要的朋友们可以参考以下实例。 实例代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta ...

    手机端textarea中输入字数监控

    ### 手机端textarea中输入字数监控 在移动端应用开发过程中,为了提供更好的用户体验以及对用户输入的有效管理,开发者经常需要实现一个功能:当用户在一个`textarea`中输入文字时,实时监控输入的字数,并根据设定...

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

    "效果超酷的textarea的输入字数限提示"是一个针对HTML `&lt;textarea&gt;` 元素的JS特效,它能提升用户在填写表单时的体验,通过实时显示剩余可输入字数,帮助用户更好地控制他们的输入内容。本文将深入探讨这个功能的实现...

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

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

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

    2. 添加阻止用户输入超过限制的字符功能,一旦达到最大字数,禁用textarea的输入。 3. 对于中文字符,由于其占用两个字节,可能需要特别处理,确保计算的字数准确。 六、实际应用 这样的功能在社交媒体、论坛、博客...

    jquery实现限制textarea输入字数的方法

    jquery怎么实现限制textarea输入的字数呢?...textarea 限制字数&lt;/title&gt; &lt;style&gt; .container{ position: relative; width: 730px; } .container span{ position: absolute; bottom: 20px; ri

    jQuery编写textarea输入字数限制代码

    在介绍jQuery如何实现textarea输入字数限制之前,我们首先要了解jQuery的基础知识和textarea的HTML属性。jQuery是一个快速、小巧、功能丰富的JavaScript库。它简化了HTML文档遍历、事件处理、动画和Ajax交互,极大地...

    jquery实现textarea输入框限制字数的方法

    本文实例讲述了jquery实现textarea输入框限制字数的方法。分享给大家供大家参考。具体分析如下: 网上有使用属性 disabled 来实现,这个不好,想修改都没有修改。当然,这个也不是很完美。 代码如下:&lt;html&gt; &...

Global site tag (gtag.js) - Google Analytics