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几种形式的树结构菜单
May 10 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 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
德生PL330测评
2021/03/02 无线电
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
PHP 裁剪图片
2021/03/09 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
iview实现图片上传功能
2020/06/29 Javascript
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
python 监控logcat关键字功能
2020/09/04 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
大学生两会学习心得体会
2014/03/10 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
房产遗嘱范本
2015/08/06 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android