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 相关文章推荐
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 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/09 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP缓冲区用法总结
2016/02/14 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
JavaScript函数详解
2014/11/17 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
预备党员思想汇报范文
2014/01/11 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
python实现进度条的多种实现
2021/04/29 Python
Nginx内网单机反向代理的实现
2021/11/07 Servers
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android
MySQL创建管理子分区
2022/04/13 MySQL
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript