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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
js arguments对象应用介绍
Nov 28 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
React中的render何时执行过程
Apr 13 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 Javascript
详解Js模块化的作用原理和方案
Apr 29 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
php4的session功能评述(一)
2006/10/09 PHP
php session 检测和注销
2009/03/16 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
js使用心得分享
2015/01/13 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
Django基于ORM操作数据库的方法详解
2018/03/27 Python
python调用c++传递数组的实例
2019/02/13 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
Python descriptor(描述符)的实现
2020/11/15 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
接口的多继承会带来哪些问题
2015/08/17 面试题
学雷锋标兵事迹材料
2014/08/18 职场文书
2014年就业工作总结
2014/11/26 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL