编程 Javascript

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动态提示输入框输入字数的方法

- Author -

挨踢骑术

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery 插件模板制作jquery插件的朋友可以参考下

Mar 17 Javascript

javascript 数组学习资料收集

Apr 11 Javascript

js中的referrer返回上一页使用介绍

Sep 26 Javascript

jquery获取当前日期的方法

Jan 14 Javascript

JavaScript判断变量是否为空的自定义函数分享

Jan 31 Javascript

JS实现自适应高度表单文本框的方法

Feb 25 Javascript

JQuery实现带排序功能的权限选择实例

May 18 Javascript

原生js实现查询天气小应用

Dec 09 Javascript

js数组方法reduce经典用法代码分享

Jan 07 Javascript

vue移动UI框架滑动加载数据的方法

Mar 12 Javascript

vue数据传递--我有特殊的实现技巧

Mar 20 Javascript

webpack proxy 使用(代理的使用)

Jan 10 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