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总体架构的理解分析
Mar 07 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
js常用代码段收集
Oct 28 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
Vue基本指令实例图文讲解
Feb 25 Vue.js
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加密解密字符串函数附源码下载
2015/12/18 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
python实现获取序列中最小的几个元素
2014/09/25 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python 装饰器的使用示例
2020/10/10 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
百丽国际旗下购物网站:优购
2017/02/28 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
义诊活动总结
2015/02/04 职场文书
讲座通知范文
2015/04/23 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
python实现过滤敏感词
2021/05/08 Python
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
一篇文章学会Vue中间件管道
2021/06/20 Vue.js