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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 Javascript
如何用JavaScipt测网速
May 09 Javascript
JavaScript执行机制详细介绍
Dec 06 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
PHP网站提速三大“软”招
2006/10/09 PHP
用PHP写的MySQL数据库用户认证系统代码
2007/03/22 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
Node.js实现文件上传
2016/07/05 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
python自定义解析简单xml格式文件的方法
2015/05/11 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
基于python实现简单日历
2018/07/28 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
Python图像读写方法对比
2020/11/16 Python
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
个人评价范文分享
2014/01/11 职场文书
给老婆的婚前保证书
2014/02/01 职场文书
总经理工作职责范文
2014/03/14 职场文书
给孩子的新年寄语
2014/04/08 职场文书
实习介绍信范文
2015/05/05 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
Python开发五子棋小游戏
2022/04/28 Python