JS动态呈现还可以输入字数
现在觉得当我们使用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动态呈现还可以输入字数的更多相关文章
- JS控制文本框textarea输入字数限制
<html> <head> <title>JS限制Textarea文本域字符个数</title> <meta http-equiv="C ...
- JS控制文本框textarea输入字数限制的方法
<html> <head runat="server"> <title></title> <script type=" ...
- JS 限制input框的输入字数,并提示可输入字数
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 限制输入字数JS
<tr> <th><b>说明内容:</b><span id="content">(500字以内)</span> ...
- 还能输入多少字?(JS动态计算)
<div class="m-form ovh"> <div class="hd"> <span class="fr&qu ...
- js动态显示可输入字数并提示还可以输入的字数
动态显示可输入的字数提示还可以输入的字数. 代码: <input name="title" type="text" size="50" ...
- js统计文本框剩余可输入字数
js统计文本框剩余可输入字数 <html><head runat="server"> <title></title> <scr ...
- Jquery 提示还可以输入的字数,将多余的字数截取掉
js代码: $(function () { var counter = $("#divform textarea").val().length; //获取文本域的字符串长度 $( ...
- js限制文本框输入字数
//js代码 <script type="text/javascript"> function checkLen(term){ document.all.termLen ...
随机推荐
- RAD项目结构
- 使用shell脚本获取虚拟机中cpu使用率(读/proc/statc)
#!/bin/bash interval= cpu_num=`-] -c` start_idle=() start_total=() cpu_rate=() cpu_rate_file=./`host ...
- .NET基础篇——Entity Framework 数据转换层通用类
在实现基础的三层开发的时候,大家时常会在数据层对每个实体进行CRUD的操作,其中存在相当多的重复代码.为了减少重复代码的出现,通常都会定义一个共用类,实现相似的操作,下面为大家介绍一下Entity F ...
- zoj 3716 Ribbon Gymnastics (思维数学题)
题目 以四个顶点为圆心画圆,圆面积不能重合,求四个圆的直径和最大是多少. #define _CRT_SECURE_NO_WARNINGS #include<string.h> #inclu ...
- 此版本的 SQL Server 不支持用户实例登录标志。该连接将关闭“的解决
此版本的 SQL Server 不支持用户实例登录标志.该连接将关闭“的解决(转) 2008-10-04 13:31 错误提示:说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息 ...
- Ubuntu下编译运行Kamailio
kamailio----配置没有成功,这个文档过几天删除,因为这个项目的文档非常少,而且qq群里的人也不活跃,现在正在研究Freeswitch,如果能够满足,就不研究这个了,这篇文档会删除. Kama ...
- HTML5入门九---Canvas画布
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Delphi 7事件的多处理机制
Delphi 7事件的多处理机制Allen Tao2007-08-19 首先解释一下这个题目.在我使用Delphi 7的过程中发现,一个对象的事件只能被一个过程处理.如果多次给这个对象的事件赋给处理事 ...
- 配置Excel的DCOM权限
异常详细信息: System.UnauthorizedAccessException: 检索 COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-00000000004 ...
- 转:Servlet的url匹配以及url-pattern详解
Servlet是J2EE开发中常用的技术,使用方便,配置简单,老少皆宜.估计大多数朋友都是直接配置用,也没有关心过具体的细节,今天遇到一个问题,上网查了servlet的规范才发现,servlet中的u ...