javascript文本框内输入文字倒计数的方法


Posted in Javascript onFebruary 24, 2015

本文实例讲述了javascript文本框内输入文字倒计数的方法。分享给大家供大家参考。具体实现方法如下:

<html>

<head>

<title>文本框内输入文字倒计数效果</title>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

maxLen = 100; //定义用户可以输入的最多字数

function checkMaxInput(obj) {

if (obj.value.length > maxLen){ //如果输入的字数超过了限制

obj.value = obj.value.substring(0, maxLen); //就去掉多余的字

remLen.innerText = '您输入的内容超出了字数限制'

}

else{

remLen.innerText = '还剩下' + (maxLen - obj.value.length) + '字';//计算并显示剩余字数

}

}

//  End -->

</script>

</head>

<body>

<table border="1" width="40%" cellspacing="0" cellpadding="0" bordercolorlight="#000000" bgcolor="#808080" height="0">

 <tr>

  <td width="100%"><b><font color=ffffff>倒计数文本框</font></b></td>

 </tr>

 <tr>

  <td width="100%" height="110">

   <form name=tickform>

    <p align="center">

     <textarea name=msgbox rows=5 cols=31 onKeyDown="checkMaxInput(this)" onKeyUp="checkMaxInput(this)" style="background-color: #000000; color: #FFFFFF;overflow:auto"></textarea>

    </p>

   </td>

  </tr>

</form>

 <tr>

  <td width="100%">

   <font align="right" id=remLen><b></b></font>

  </td>

 </tr>

</table>

</body> 

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript IFrame 强制刷新代码
Jul 23 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
详解JavaScript对象类型
Jun 16 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
JS数组转字符串实现方法解析
Sep 04 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 #Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 #Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 #Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 #Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 #Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 #Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 #Javascript
You might like
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
讲解vue-router之什么是动态路由
2018/05/28 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
python实现从web抓取文档的方法
2014/09/26 Python
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
护理专业的自荐信
2013/10/22 职场文书
留学自荐信写作方法
2014/01/27 职场文书
考试作弊检讨书
2015/01/27 职场文书
大学军训决心书
2015/02/05 职场文书
中秋节慰问信
2015/02/15 职场文书
法律意见书范本
2015/06/04 职场文书
Python IO文件管理的具体使用
2022/03/20 Python