JavaScript动态提示输入框输入字数的方法


Posted in Javascript onJuly 27, 2015

本文实例讲述了JavaScript动态提示输入框输入字数的方法。分享给大家供大家参考。具体如下:

在QQ空间里有小纸条那么一个功能,随着你在文本框中输入多少字,上面会动态提示你“已经输入多少字”和“还可以输入多少字”,觉得挺好的,所以自己也试着做做,呵呵。
 
开始,我想很多人第一感觉就是通过js的 onkeydown或者onkeyup来做,中发现还可以用focus + setInterval() +blur来达到我们需要的效果,于是很快的我利用这种方法自己粗糙的写了一下,达到了预期的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>IT技术网-JavaScript动态提示输入框输入字数</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function $(obj){
return document.getElementById(obj);
}
function sp(){
var tex = $('te').value;
var nun =tex.length;
var spa = $('span');
spa.innerHTML = nun;
}
</script>
</head>
<body>
你已经输入了<span id='span'>0</span>字
<input value="" id="te" type="text" onfocus="ss=setInterval(sp,600)" onblur="clearInterval(ss)"/>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js中判断控件是否存在
Aug 25 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
js实现弹幕飞机效果
Aug 27 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 #Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 #Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 #Javascript
在for循环中length值是否需要缓存
Jul 27 #Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 #Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 #Javascript
javascript实现类似百度分享功能的方法
Jul 27 #Javascript
You might like
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
js模拟百度模糊搜索的实例
2017/08/04 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python爬虫面试宝典(常见问题)
2018/03/02 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
numpy库reshape用法详解
2020/04/19 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
2014年重阳节活动策划方案书
2014/09/16 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python