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 验证浏览器是否支持javascript的方法小结
May 17 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
js中settimeout方法加参数
Feb 28 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
关于PHP5 Session生命周期介绍
2010/03/02 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP Reflection API详解
2015/05/12 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
python实现发送邮件及附件功能
2021/03/02 Python
django+mysql的使用示例
2018/11/23 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
python实现感知机模型的示例
2020/09/30 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
领导干部保密承诺书
2014/08/30 职场文书
2014年设计师工作总结
2014/11/25 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
法定代表人资格证明书
2015/06/18 职场文书
公司规章制度范本
2015/08/03 职场文书
安全责任协议书范本
2016/03/23 职场文书
党组织结对共建协议书
2016/03/23 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
Python Pandas解析读写 CSV 文件
2022/04/11 Python