文本域往往可以输入大量的文字信息，但是在文本域上有一些键盘的处理事件：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. 【C语言】06-基本数据类型

    C语言有丰富的数据类型,因此它很适合用来编写数据库,如DB2.Oracle都是C语言写的. C语言的数据类型大致可以分为下图中的几类: 回到顶部 一.变量 跟其他语言一样,C语言中用变量来存储计算过程 ...

  2. Odoo 外协加工产品的实现

    需求,当前有产品A需要讲原料B.C送到加工厂P,由加工厂P加工完成后送回公司,然后再销售给客户. 1.首先,设置产品A的BOM由原料B,C组成,产品A的Route设置为Manufacture,产品A的 ...

  3. spark Using MLLib in Scala/Java/Python

    Using MLLib in ScalaFollowing code snippets can be executed in spark-shell. Binary ClassificationThe ...

  4. spring boot结合thymeleaf

    1.在pom文件中加入thymeleaf相关的依赖 spring-boot-starter-thymeleaf 2.在resource文件夹下创建 template文件夹,在template文件夹中创 ...

  5. 将JsonObject转换成HashMap

    1.工具类: Utils.class: (1)简单的键值对map public class Utils { public static String getRaw(Context context, i ...

  6. PHP 开发 APP 接口 学习笔记与总结 - 静态缓存

    存储静态缓存即把缓存写入文件. file.php <?php class Cache{ //静态缓存文件后缀名 const EXT = 'txt'; //定义缓存文件存放路径 private $ ...

  7. thread、operation、GCD

    // ViewController.m #import "ViewController.h" @interface ViewController () { //任务队列,能够自动管 ...

  8. Yii源码阅读笔记（十五）

    Model类,集中整个应用的数据和业务逻辑——验证 /** * Returns the attribute labels. * 返回属性的标签 * * Attribute labels are mai ...

  9. STM32全球唯一ID读取方法

    产品唯一的身份标识非常适合:● 用来作为序列号(例如USB字符序列号或者其他的终端应用)● 用来作为密码,在编写闪存时,将此唯一标识与软件加解密算法结合使用,提高代码在闪存存储器内的安全性.● 用来激 ...

  10. 大话数据结构（十一）java程序——串

    1.串的定义 串(String):是由零个或多个字符组成的有限序列,又名为字符串. 一般记为s="a1a2a3.........an"(n>=0),其中,s是串名称,用双引号 ...