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 阴影插件代码分享
Jan 09 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
javascript对象的相关操作小结
May 16 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
JS实现小球的弹性碰撞效果
Nov 11 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
PHP5 安装方法
2006/10/09 PHP
php对数组排序的简单实例
2013/12/25 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
js replace 全局替换的操作方法
2018/06/12 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
python3实现短网址和数字相互转换的方法
2015/04/28 Python
python简单文本处理的方法
2015/07/10 Python
Python 实现简单的电话本功能
2015/08/09 Python
django中静态文件配置static的方法
2018/05/20 Python
python判断设备是否联网的方法
2018/06/29 Python
基于python中__add__函数的用法
2019/11/25 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
初中教师个人总结
2015/02/10 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
Go web入门Go pongo2模板引擎
2022/05/20 Golang