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 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
在html页面上拖放移动标签
Jan 08 Javascript
JavaScript作用域链示例分享
May 27 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
JavaScript运动原理基础知识详解
Apr 02 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中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
python 实现插入排序算法
2012/06/05 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python通过future处理并发问题
2017/10/17 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
Html5 localStorage入门教程
2018/04/26 HTML / CSS
总经理秘书工作职责
2013/12/26 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
幼儿园家长评语
2014/02/10 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
护林员个人总结
2015/03/04 职场文书
python Polars库的使用简介
2021/04/21 Python
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL