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选中select控件 无法设置selected的解决方法
Sep 01 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
vue3获取当前路由地址
Feb 18 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
咖啡常见的种类
2021/03/03 新手入门
PHP4之COOKIE支持详解
2006/10/09 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
js闭包实例汇总
2014/11/09 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python3基础之基本运算符概述
2014/08/13 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python实现手绘图效果实例分享
2020/07/22 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
小学后勤管理制度
2014/01/14 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
医院节能减排方案
2014/06/13 职场文书
离婚协议书格式
2014/11/21 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
JAVA API 实用类 String详解
2021/10/05 Java/Android
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers