现在觉得当我们使用js或者jquery来呈现一个动态效果时,主要还是要想清楚它的思想、它的原理。而动态呈现输入字数,其实就是给它设置一个最大输入字数,然后获取已输入的字数,自然想做什么都可以。

<script>
function setShowLength(obj,maxlength,id){
var remain= maxlength - obj.value.length;
var oid = id;
if(remain<){ remain=; }
document.getElementById(oid).innerHTML = "还可以输入"+remain+"字数";
}
</script> <input type="text" name="title" size="" maxlength="" onkeyup="javascript:setShowLength(this,15,'content');" />
<span id="content">还可以输入15个字数</span>

  

这是个用原生js的,自然也是可以用jquery写出来。

   

<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(document).keyup(function() {
var counter = $("#divform textarea").val().length; //获取文本域的字符串长度
$("#gptu var").text( - counter); //每次减去字符长度
}); });
</script> <div id="divform" align="center">
<p id="gptu">
你还可以输入<var style="color: #C00">--</var>个字符。</p>
<p>
<label>
<textarea name="" cols="" rows="" maxlength="" style="height: 80px; width: 400px"></textarea>
</label>
</p>
</div>

   刨去几句css,原理都是一样的。

   在网上还可以看到相关的应用,就是类似微博的文字输入框

JS动态呈现还可以输入字数的更多相关文章

  1. JS控制文本框textarea输入字数限制

    <html> <head> <title>JS限制Textarea文本域字符个数</title> <meta http-equiv="C ...

  2. JS控制文本框textarea输入字数限制的方法

    <html> <head runat="server"> <title></title> <script type=" ...

  3. JS 限制input框的输入字数,并提示可输入字数

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 限制输入字数JS

    <tr> <th><b>说明内容:</b><span id="content">(500字以内)</span> ...

  5. 还能输入多少字?(JS动态计算)

    <div class="m-form ovh"> <div class="hd"> <span class="fr&qu ...

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

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

  7. js统计文本框剩余可输入字数

    js统计文本框剩余可输入字数 <html><head runat="server"> <title></title> <scr ...

  8. Jquery 提示还可以输入的字数,将多余的字数截取掉

    js代码: $(function () { var counter = $("#divform textarea").val().length; //获取文本域的字符串长度 $( ...

  9. js限制文本框输入字数

    //js代码 <script type="text/javascript"> function checkLen(term){ document.all.termLen ...

随机推荐

  1. RAD项目结构

  2. 使用shell脚本获取虚拟机中cpu使用率(读/proc/statc)

    #!/bin/bash interval= cpu_num=`-] -c` start_idle=() start_total=() cpu_rate=() cpu_rate_file=./`host ...

  3. .NET基础篇——Entity Framework 数据转换层通用类

    在实现基础的三层开发的时候,大家时常会在数据层对每个实体进行CRUD的操作,其中存在相当多的重复代码.为了减少重复代码的出现,通常都会定义一个共用类,实现相似的操作,下面为大家介绍一下Entity F ...

  4. zoj 3716 Ribbon Gymnastics (思维数学题)

    题目 以四个顶点为圆心画圆,圆面积不能重合,求四个圆的直径和最大是多少. #define _CRT_SECURE_NO_WARNINGS #include<string.h> #inclu ...

  5. 此版本的 SQL Server 不支持用户实例登录标志。该连接将关闭“的解决

    此版本的 SQL Server 不支持用户实例登录标志.该连接将关闭“的解决(转) 2008-10-04 13:31 错误提示:说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息 ...

  6. Ubuntu下编译运行Kamailio

    kamailio----配置没有成功,这个文档过几天删除,因为这个项目的文档非常少,而且qq群里的人也不活跃,现在正在研究Freeswitch,如果能够满足,就不研究这个了,这篇文档会删除. Kama ...

  7. HTML5入门九---Canvas画布

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

  8. Delphi 7事件的多处理机制

    Delphi 7事件的多处理机制Allen Tao2007-08-19 首先解释一下这个题目.在我使用Delphi 7的过程中发现,一个对象的事件只能被一个过程处理.如果多次给这个对象的事件赋给处理事 ...

  9. 配置Excel的DCOM权限

    异常详细信息: System.UnauthorizedAccessException: 检索 COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-00000000004 ...

  10. 转:Servlet的url匹配以及url-pattern详解

    Servlet是J2EE开发中常用的技术,使用方便,配置简单,老少皆宜.估计大多数朋友都是直接配置用,也没有关心过具体的细节,今天遇到一个问题,上网查了servlet的规范才发现,servlet中的u ...