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 相关文章推荐
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
js密码强度校验
Nov 10 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 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实现多条件查询实例代码
2010/07/17 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php之readdir函数用法实例
2014/11/13 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
使用Python编写vim插件的简单示例
2015/04/17 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
学期自我鉴定范文
2013/10/01 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
企业人事任命书
2014/06/05 职场文书
素质教育标语
2014/06/27 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
Python实现归一化算法详情
2022/03/18 Python