JQuery统计input和textarea文字输入数量(代码分享)

本文主要介绍了jQuery实现统计输入文字个数的方法,需要的朋友可以参考下。

HTML部分：

<input type="text" value="我是输入的文字" maxlength="10" id="detail1"/>
<p><span id="detail1_num">0</span>/<span>10</span></p>
<textarea placeholder="最多输入100字" rows="3" maxlength="100" class="editDetail" id="detail2" >呵呵</textarea>
<p><span id="detail2_num">0</span>/<span>100</span></p>

JS部分：

$(function(){
 /*input字数*/
 /*在页面刚载入时先显示出输入框的字数*/
 var text1=$("#detail1").val();
 var counter1=text1.length;
 $("#detail1_num").text(counter1);
 /*添加触发事件进行动态计算输入框的字数*/
 $("#detail1").on('blur keyup input',function(){
 var text=$("#detail1").val();
 var counter=text.length;
 $("#detail1_num").text(counter);
 });
 /* textarea字数*/
 var text2=$("#detail2").val();
 var counter2=text2.length;
 $("#detail2_num").text(counter2);
 $("#detail2").on('blur keyup input',function(){
 var text=$("#detail2").val();
 var counter=text.length;
 $("#detail2_num").text(counter);
 });
});

效果图如下：

由于博主主要做移动端开发，刚开始在移动端测试时由于输入文字是会出现输入框，在输入框中输入的文字在计算时会出现错误，所以又添加了一个input事件，这个事件会在输入框内边输入边进行计算（主要是拼音输完以后确认汉字部分）。

希望对大家有帮助。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • jQuery计算textarea中文字数(剩余个数)的小程序

    复制代码 代码如下: <div class="area">        <p>            还可以输入<b class="num">140</b>字</p>        <textarea class="chackTextarea"></textarea>    </div> <script type="text/java

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

    本文实例讲述了jquery实现textarea输入框限制字数的方法.分享给大家供大家参考.具体分析如下: 网上有使用属性 disabled 来实现,这个不好,想修改都没有修改.当然,这个也不是很完美. 复制代码 代码如下: <html> <head> <title> jquery完美实现textarea输入框限制字数</title> <meta http-equiv="content-type" content="text

  • input 和 textarea 输入框最大文字限制的jquery插件

    复制代码 代码如下: /* input 和 textarea 最大文字限定插件 * 修改版, 一个中文表示1一个字, 一个英文半个字; * TextLimit - jQuery plugin for counting and limiting characters for input and textarea fields * * pass '-1' as speed if you don't want the char-deletion effect. (don't just put 0) *

  • 基于jquery的textarea发布框限制文字字数输入(添加中文识别)

    基于jquery的textarea发布框限制文字字数输入(添加中文识别)

    效果图如下 : 源代码如下 : 复制代码 代码如下: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("textarea"

  • jQuery检测输入的字符串包含的中英文的数量

    方法一: $(document).ready(function () { var tempStr = "abcdefg我们都是好孩子"; var pattern_char = /[a-zA-Z]/g; var pattern_chin = /[\u4e00-\u9fa5]/g; var count_char = tempStr.match(pattern_char).length; var count_chin = tempStr.match(pattern_chin).length;

  • JQuery 表单中textarea字数限制实现代码

    复制代码 代码如下: $('#FashionStatement').val(''); var limitNum = 1000; var pattern = '还可以输入' + limitNum + '字'; $('#statementRowChk').html(pattern); $('#FashionStatement').keyup( function() { var remain = $(this).val().length; if (remain > 1000) { pattern =

  • 基于jquery的inputlimiter 实现字数限制功能

    基于jquery的inputlimiter 实现字数限制功能

    看下效果图: 源代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en&qu

  • input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态:  输入框获取焦点状态:  大家可以看效果图的搜索输入框,默认显示着"用户名/Email"的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示"用户名/Email"的提示.是不是很常见?很多搜索.登录.表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 复制代码 代码如下: &l

  • jQuery实现统计复选框选中数量

    代码很简介,功能也很简单,但是却很实用,这里就不细说明了直接上代码 jQuery代码: 复制代码 代码如下: function countNum(){           //alert($('input[name=check]:checked').length);          var arrays = new Array();           var items = document.getElementsByName("check");           for(var

  • jQuery实现限制textarea文本框输入字符数量的方法

    本文实例讲述了jQuery实现限制textarea文本框输入字符数量的方法.分享给大家供大家参考.具体实现方法如下: (function($) { $.fn.extend( { limiter: function(limit, elem) { $(this).on("keyup focus", function() { setCount(this, elem); }); function setCount(src, elem) { var chars = src.value.lengt

  • jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码

    复制代码 代码如下: <input value="请输入用户名" type="text"> <input value="请输入密码" type="text"> <input value="提交" type="submit"> <script> $(function(){ //输入框中文字颜色控制 $("input:not(:las

随机推荐