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 ...
随机推荐
- java给图片加水印代码
try { String targetImg = "D:/Blue hills.jpg"; // String pressImg = "D:/20130311220300 ...
- .NET中数据集的强类型化
我们知道,每一种程序设计语言都提供一定的类型检查,类型检查可以在编译时进行,也可以在运行时进行,分别称做静态类型检查和动态类型检查.由于静态类型的检查是在编译时进行,实现比较容易,能提高程序的运行效率 ...
- mybatis 插入日期类型精确到秒的有关问题
mybatis 插入日期类型精确到秒的问题 Mybatis 插入 数据库是为了防止插入空时报错, Mybatis 提供了一套机制,只要给定插入的字段的类型,如果为空,则它会自动处理为相应类型的默认值: ...
- 适合我胃口的angular.js学习资料
断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...
- 手动安装UniDAC的过程
每次安装都不一样,而且有时候挺麻烦的,所以记下来.我这次安装过程是这样的: 0. 修改Source\Delphi7\Make.bat,填入正确的IdeDir 1.找到source\delphi7目录, ...
- C#中用JavaScriptSerializer和Json.Net操作json格式的文件
1.json文件 2.写出对应的类 //折扣 public class Discount { public string Qty { get; set; } public string percent ...
- NPOI操作EXCEL----------NPOI基础01
来源地址:http://www.cnblogs.com/csqb-511612371/p/4878059.html 先来介绍一下NPOI基本的东西: 1.下载地址:http://npoi.codepl ...
- Java NIO1
发现了一个很好的学习Java的外国网站,英语都是很简单的啦,看英语舒服些,关于NIO的系列就直接参照此网站了,而且是英语的! http://tutorials.jenkov.com/ Java NIO ...
- MySQL登录报错"Access denied for user 'root'@'localhost' (using password: YES)"
最近登录MySQL时候总报错: # mysql -uroot -p Enter password: ERROR (): Access denied for user 'root'@'localhost ...
- 【Android多屏适配】动态改变Listview item高度
在ListView的Adapter中去直接获取传入View的LayoutParams是会报空指针异常的,唯一的方法是在xml中嵌套布局一层LinearLayout <?xml version=& ...