效果:

html代码:

<textarea id="assayInfo" name="assayInfo" rows="3" cols="34" maxlength="30" placeholder="提示:请输入检查结果等相关信息,最多30个汉字"></textarea>
<span id="wordCount">30</span>/30

jquery代码:

$(document).ready(function() {
var counter = $("#assayInfo").val().length; //获取文本域的字符串长度
$("#wordCount").text(30 - counter);
$(document).keyup(function() {
var text = $("#assayInfo").val();
var counter = text.length;
$("#wordCount").text(30 - counter); //每次减去字符长度
}); });

jquery textarea输入字符字数提示的更多相关文章

  1. jquery实现显示textarea输入字符数

    起初会想到使用keyup.keydown.keypress或者是onchange事件,onchange需要失去焦点才触发, 其它三个有些对按住键盘某个键不放不生效,有些对使用中文输入法正在输入时统计不 ...

  2. textarea输入字符有限制

    function limitedNumberOfInputCharacters(limitedNumber, string){ var strLength = 0; if(string !== nul ...

  3. textarea限定字数提示效果

    最近工作中要实现的一个效果是:在textarea中输入字符会提示剩余多少字符可输入.于是马不停蹄的开始查阅资料. HTML代码: <table> <colgroup> < ...

  4. js动态显示可输入字数并提示还可以输入的字数

    动态显示可输入的字数提示还可以输入的字数. 代码: <input name="title" type="text" size="50" ...

  5. vue使用textare如何正确统计输入字符个数

    最近vue做微信公众号的开发,使用weui的textarea输入限制字数(官网例子),并且显示.代码如下:再安卓和电脑都没有问题,但是ios输入的时候,显示字数不正确, 但是输入之后删除其中一个,就可 ...

  6. chrome浏览器下禁制 textarea改变大小; Jquery的textareaCounter插件控制textarea输入的字符数量

    给  textarea 添加一个css 样式即可 resize: none;   用Jquery的插件控制textarea输入的字符数量 一:引用Jquery脚本,并引入 textareaCounte ...

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

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

  8. jquery插件:textarea的字数提示、textBox的文字提示

    引用文件:    <script src=”/TextTip/TextTip.js” type=”text/javascript”></script> 一.textarea的字 ...

  9. JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)

    一.实现效果: 为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数. html & JS: <div> <textare ...

随机推荐

  1. leetcode202(Floyd判圈算法(龟兔赛跑算法))

    Write an algorithm to determine if a number is "happy". 写出一个算法确定一个数是不是快乐数. A happy number ...

  2. itext操作PDF文件添加水印

    功能描述:添加图片和文字水印 /** * * [功能描述:添加图片和文字水印] [功能详细描述:功能详细描述] * @param srcFile 待加水印文件 * @param destFile 加水 ...

  3. What is “Mock You” :Raise,callback,verify [转载]

    http://www.cnblogs.com/wJiang/archive/2010/02/21/1670637.html Raise 如果你说会用Setup,那么Raise就更简单了.这里注意下它是 ...

  4. Bcdedit命令使用详解使用方法

    XP,WIN2003,VISTA,万indows,WIN2008多盘多系统多引导bcdedit的使用windows出了新系统vista,2008想赏赏鲜学习学习~~但又习惯于用旧的XP,2003,然而 ...

  5. 浅谈Android五大布局

    Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Android的五大布局分别是LinearLay ...

  6. zf-关于SYS_User表type的分类

    type=1 表示管理员 type=2 表示领导 type=3 表示非领导

  7. gen_grant_sel.sql

    set echo off feedback off verify off pagesize 0 linesize 120 define v_grantee=&1 define v_grant_ ...

  8. applicationContext.xml文件配置模板

    <?xml version="1.0" encoding="gb2312"?><!--  Spring配置文件的DTD定义-->< ...

  9. 在 WinCe 平台读写 ini 文件

    在上篇文章开发 windows mobile 上的今日插件时,我发现 wince 平台上不支持例如 GetPrivateProfileString 等相关 API 函数.在网络上我并没有找到令我满意的 ...

  10. Android------>TableLayout表格布局方式

    main.xml表格代码分析 <?xml version="1.0" encoding="utf-8"?> <TableLayout xmln ...