效果:

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. Apache的安装

    Apache的安装: 注:本例只截取需要注意的截图,其它默认则不显示. 1.       服务器信息可以按照默认配置,如果服务器的80端口没被其他服务器程序占据.可选“for All Users,on ...

  2. Android 下得到 未安装APK包含信息 等

    很多情况下,我们需要通过APK文件来得到它的一些信息. (此时此APK不一定被安装了) 0. 基础知识:可以通过android.content.Context的方法 getPackageManager ...

  3. AnimationSet的使用

    Animations的使用(3) 1 AnimationSet的使用方法 什么是AnimationSet 1 AnimationSet是Animation的子类 2 一个AnimationSet包含了 ...

  4. C#中Form窗体中读取EXCEL的数据

    使用OLEDB可以对excel文件进行读取,我们只要把该excel文件作为数据源即可 首先引用Microsoft.EXEL 代码如下: using System; using System.Colle ...

  5. 货物搬运(move)

    货物搬运(move) 题目描述 天地无情人有情,一方有难八方支援!汶川大地震发生后,灾区最紧缺的是救灾帐篷,全国各地支援的帐篷正紧急向灾区运送.假设围绕纹川县有环行排列的n个救灾帐篷的存储点,每个存储 ...

  6. 模仿 app

    原文链接:http://www.jianshu.com/p/a634b66cb180 前言 作为一个IOS程序员,闲的时候也想自己做一个app练练手,又苦于没有UI设计,也没有好的idea,所以只能先 ...

  7. Scroll View 深入

    转载自:http://mobile.51cto.com/hot-430409.htm 可能你很难相信,UIScrollView和一个标准的UIView差异并不大,scroll view确实会多一些方法 ...

  8. git@osc使用教程

    http://my.oschina.net/openswc/blog/142321 Git初体验 http://my.oschina.net/dxqr/blog/134811 网友整理的git@osc ...

  9. MyEclipse中提示SpringMVC的XML配置文件出错解决方法

    手动添加schema文件,方法如下: 1,依次选择:windwos->preferences->myeclipse->files and editors->xml->xm ...

  10. HttpServletRequest.getServletContext()一直提示找不到,而引出的问题

    开发j2ee项目的时候,需要用到servlet-api,如果使用了maven,web项目可以在pom.xml中手动加入所需jar包,达到与依赖j2ee libarary同样的功能.可问题来了: 1. ...