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生成json数据简单示例分享
Feb 14 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
javascript白色简洁计算器
May 04 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
vue完美实现el-table列宽自适应
May 08 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或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
基于header的一些常用指令详解
2013/06/06 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
php查看当前Session的ID实例
2015/03/16 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
jquery获取radio值实例
2014/10/16 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
js实现幻灯片轮播图
2020/08/14 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
python实现简单井字棋游戏
2020/03/04 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
戴尔英国官网:Dell英国
2017/05/27 全球购物
超级搞笑检讨书
2014/01/15 职场文书
校企合作协议书
2014/04/16 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
小学毕业教师寄语
2019/06/21 职场文书