本文主要介绍了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事件,这个事件会在输入框内边输入边进行计算(主要是拼音输完以后确认汉字部分)。

  希望对大家有帮助。

文章均为原创,转载请以链接形式标明本文地址 ,谢谢

使用JQuery统计input和textarea文字输入数量代码的更多相关文章

  1. 如何给input或textarea文字加背景色

    需求说明 如果要实现一个需求,如下图,在一个textarea中加入文字加背景色,该怎么处理呢? 答案:"很简单啊!直接给textarea加个background-color的背景颜色啊!&q ...

  2. safari中input、textarea无法输入的问题

    网址:https://www.cnblogs.com/xiayu25/p/6832748.html * { -webkit-box-sizing: border-box; -moz-box-sizin ...

  3. Safari中的input、textarea无法输入的问题

    原因是这两种表单元素上应用了user-select:none的css属性.一般没人刻意这么做,可能是这样的情况: * { user-select: none; } 在css中排除掉这两种元素就好了: ...

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

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 使用 onpropertychange 和 oninput 检测 input、textarea输入改变

    检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件. 缺陷:复制粘贴时无法检测 2.onchenge 缺陷:要满足触发条件:当前对象 ...

  6. 同时绑定onpropertychange 和 oninput 事件,实时检测 input、textarea输入改变事件,支持低版本IE,支持复制粘贴

    实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...

  7. jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化

    jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 js监听输入框值的即时变化 网上有很多关于 onpropertychange.oni ...

  8. input ,button, textarea 1)使用disabled , 2) 显示值, 3) 表单提交. 4) jquery.form.js ajaxSubmit() 无刷新ajax提交表单.

    1.使用disabled input , button  textarea 可以 被 禁用, 禁用的效果 : 1) 上面的点击事件无法使用 --- button       : 下面的 onclick ...

  9. j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

    源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

随机推荐

  1. SEED实验系列文章目录

    美国雪城大学SEEDLabs实验列表 SEEDLabs是一套完整的信息安全实验,涵盖本科信息安全教学中的大部分基本原理.项目组2002年由杜文亮教授创建,目前开发了30个实验,几百所大学已采用.实验楼 ...

  2. Linux环境下shell和vim中乱码原因及消除办法

    shell和vim中乱码原因及消除办法 作者:Jack47 在Linux下开发,经常遇到乱码问题:shell或者vim中显示不了中文,或者能够显示,但不能输入中文.每次都是上网去搜,或者同事告诉我一些 ...

  3. 2000条你应知的WPF小姿势 基础篇<28-33 WPF启动故事>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000Things You Should Know About C# 和 2,0 ...

  4. 学习WCF入门的第一个实例

    一.概述 WCF说白了就是一个基于终结点的通信手段!就是Service端提供一定的功能实现,然后暴露出一个或多个终结点,Client端调用Service端的功能(可以理解为调用一个函数),那么Clie ...

  5. wordpress去掉导航栏链接中的category

    找到服务器目录下的functions..php文件,在末尾处添加如下内容即可. 路径:/htdocs/wp-content/themes/functions.php 要追加在functions.php ...

  6. ASP.NET Core 1.1 Preview 1 简介(包含.NETCore 1.1升级公告)

    ASP.NET Core 1.1 Preview 1于2016年10月25日发布.这个版本包括许多伟大的新功能以及许多错误修复和一般的增强. 要将现有项目更新到ASP.NET Core 1.1 Pre ...

  7. ASP.NET MVC5+EF6+EasyUI 后台管理系统(52)-美化EasyUI皮肤和图标

    系列目录 我很久以前就想更新系统的皮肤功能,Easyui 自带的皮肤已经无法满足客户的审美. 皮肤颜色来源于AdminLTE系统.我的颜色全部都这里取的.,所以一共取了11个颜色.1个皮肤=2个ban ...

  8. 定时管理器框架-Task.MainForm

    入住博客园4年多了,一直都是看别人的博客,学习别人的知识,为各个默默无私贡献自己技术总结的朋友们顶一个:这几天突然觉得是时候加入该队列中,贡献出自己微弱的力量,努力做到每个月有不同学习总结,知识学习的 ...

  9. Log4net入门(控制台篇)

    Log4net是Apache公司的log4j™的.NET版本,用于帮助.NET开发人员将日志信息输出到各种不同的输出源(Appender),常见的输出源包括控制台.日志文件和数据库等.本篇主要讨论如何 ...

  10. EntityFramework 7 Migrations 迁移命令

    示例代码: using Microsoft.Data.Entity; using System.Collections.Generic; namespace ClassLibrary1 { publi ...