文本域往往可以输入大量的文字信息，但是在文本域上有一些键盘的处理事件：onkeydown、onkeypress、onkeyup。

范例一：观察文本域的键盘事件处理

代码如下：

效果图如下：

默认状态：    　　　　　　　　　　　　　　　　任意输入一个字，操作键盘时：

 

范例二：限制文本域数字的长度，当文字超过时，提交按钮被禁止使用。

代码如下：

<!doctype html>

 <html lang = "zh-CN">

 <head>

     <meta charset="utf-8">

     <meta name="description" content="this is a checkbox example">

     <meta name="keywords" content="checkbox,html,js">

     <title>文本域事件的测试</title>

     <script type="text/javascript">

         window.onload = function () {

             document.getElementById("textArea").addEventListener('keypress',function(){

                 calfontCount();

             },false);

             document.getElementById("textArea").addEventListener('keydown',function(){

                 calfontCount();

             },false);

             document.getElementById("textArea").addEventListener('keyup',function(){

                 calfontCount();

             },false);

         }

         //计算文字个数

         function calfontCount () {

             var textSpan =  document.getElementById("textSpan");

             var textArea =  document.getElementById("textArea");

             var max = 20; //文字总个数

             var cur =  textArea.value.length ; //当前文字个数

             if (cur<= max) {

                 textSpan.innerHTML = "还允许输入"+(max-cur)+"个字";

                 document.getElementById("subBut").disabled = false;

             }else{

                 textSpan.innerHTML = "还允许输入<font color='red'>"+(max-cur)+"</font>个字";

                 document.getElementById("subBut").disabled = true;

             }

         }

     </script>

 </head>

 <body>

     <form action="">

         请输入你自己的评价：

         <div>

             <textarea id="textArea" cols="30" rows="3"></textarea>

             <div><span id="textSpan">还允许输入20个字</span></div>

         </div>

         <div>

             <input type="submit" id="subBut" value="提交">

         </div>

     </form>

 </body>

 </html>

效果图如下：

默认状态时：

输入个数小于20数，提交按钮可操作时：

输入个数大于20数，超出数字变色，提交按钮也变色，此时不可操作时：

JavaScript：文本域事件处理的更多相关文章

  1. Placeholdem文本域占位符符号标识JavaScript插件

    Placeholdem是文本域占位符符号标识的一个JavaScript插件.占位符的值将逐步删除焦点文字,并在焦点离开逐步恢复. 在线demo:http://placeholdem.jackrugil ...

  2. Javascript实例技巧精选(7)—设置和获取文本框与文本域的光标位置（兼容IE和Chrome,Firefox）

    >>点击这里下载完整html源码<< 截图如下: 本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置,以下代码兼容IE和Chrome,Firefox ...

  3. 【repost】JavaScript 事件模型 事件处理机制

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  4. 解决：HTML中多文本域(textarea)回车后数据存入数据库，EL表达式取出异常。

    问题描述: 当多文本域(textarea)回车后数据存入数据库. EL表达式取出异常,值换行倒置页面报错. 问题解决: 存值脚本代码,提交前转换\n为<br/>. <script t ...

  5. [转]理解JavaScript中的事件处理

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  6. 理解JavaScript中的事件处理

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  7. JS-007-富文本域操作

    在日常 web 编写过程中,富文本域几乎成为了一个网站不可页面元素,同时,其也有着各种各样的实现方式,网络上也存在着各种各样的集成插件可供引用.此文以 js 获取.修改 163 邮箱写邮件时的邮件内容 ...

  8. 理解JavaScript中的事件处理 阻止冒泡event.stopPropagation();

    原文地址:http://www.cnblogs.com/binyong/articles/1750263.html 这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时 ...

  9. 转：JS在文本域鼠标指定位置插入文本-柯乐义

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. QT快捷键

    F1使用方法:选中某一类或函数,按下F1,出现帮助文档 F2使用方法:选中某一类或函数,按下F2,迅速定位到该类或函数声明的地方或被调用的地方 Ctrl+鼠标滚轮的使用方法:按住Ctrl,使鼠标滚轮旋 ...

  2. [百科] - CreatePen()

    CreatePen编辑[声明]HPEN CreatePen(int nPenStyle, int nWidth, COLORREF crColor);[说明]用指定的样式.宽度和颜色创建一个画笔[参数 ...

  3. 让input不可编辑的方法

    两种方法: disabled="true " 文字会变成灰色,不可编辑. readOnly="true" 文字不会变色,也是不可编辑的 <input na ...

  4. opengl中层次建模的实现

    1.显示列表的创建 例如: glNewList(listID,listMode); glutSolidCube(2.0); ...... glEndlist(); 可以创建一个listID显示列表,l ...

  5. 滴答数必须介于 DateTime.MinValue.Ticks 和 DateTime.MaxValue.Ticks 之

    一个莫名其妙的问题:错误 滴答数必须介于 DateTime.MinValue.Ticks 和 DateTime.MaxValue.Ticks 之间. 参数名:ticks.这 网上找了很多,都没有一个正 ...

  6. JavaScript编码规范[百度]

    JavaScript编码规范 1 前言   2 代码风格   2.1 文件   2.2 结构   2.2.1 缩进   2.2.2 空格   2.2.3 换行   2.2.4 语句   2.3 命名 ...

  7. axure rp extension的下载

    使用chrome无法直接打开axure制作的prd文档,需要下载相关插件.平时用的shadowsocksFQ软件,登录chrome的网上应用商店,确发现无法正常下载, 于是通过其他途径下载了改插件,拖 ...

  8. Hrbustoj 1429 二分+计算几何

    http://www.bubuko.com/infodetail-1121744.html 在这个上面学习了方法 如果要判断巨量的点 就应该使用二分法 思路是先从a[1] a[n] a[2]来判断是否 ...

  9. 《Pro Git》笔记1：起步

    第一章 起步 1.关于版本控制 版本控制用于记录和追踪目录结构和文件内容变化,能够追溯过去的任何修改和变化,并恢复到任何历史状态. 版本控制系统可以按照发展过程分成以下几类: 目录备份.记录版本变化最 ...

  10. nVIDIA SDK White Paper －－－－Vertex Texture Fetch Water

    http://blog.csdn.net/soilwork/article/details/713842 nVIDIA SDK White Paper ----Vertex Texture Fetch ...