文本域往往可以输入大量的文字信息，但是在文本域上有一些键盘的处理事件：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. Struts2 中result type属性说明

    Struts2 中result type属性说明 首先看一下在struts-default.xml中对于result-type的定义: <result-types><result-t ...

  2. PDO常用方法及其应用

    PDO::query() 主要是用于有记录结果返回的操作,特别是SELECT操作 PDO::exec() 主要是针对没有结果集合返回的操作,如INSERT.UPDATE等操作 PDO::prepare ...

  3. 如何在64位windows7上同时使用32位和64位的Eclipse

    我用的是64位的windows7旗舰版,jdk1.7 64位机器上可以同时运行32位和64位的Eclipse,但是电脑中必须有相应的jdk.Eclipse虽然不需要安装,但是在启动时会检查系统中固定文 ...

  4. Spring框架中的定时器 如何使用和配置

    目标类 <bean id="myTimer" class="com.timer.MyTimer"></bean> 配置你的定时器详情 & ...

  5. POJ 1988 Cube Stacking（带权并查集）

    Cube Stacking Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 23678   Accepted: 8299 Ca ...

  6. HTML5:离线存储(缓存机制)-IndexDB

    https://www.w3.org/TR/IndexedDB/ .. <!DOCTYPE html> <html> <head> <meta charset ...

  7. PHP 中和 HTTP 相关的函数及使用

    ① get_headers 方法:取得服务器响应一个 HTTP 请求所发送的所有标头 例如: <?php $httpinfo = get_headers('http://www.baidu.co ...

  8. thread、operation、GCD

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

  9. Oracle 常见问题

    查看Oracle数据库是否安装成功 sqlplus /nolog SQL>conn / as sysdba Connected to an Idle instance(表明成功) SQL> ...

  10. 关于优化sql查询的一个方法。

    select * from gmvcsbase.base_file file,gmvcsbase.base_user user,gmvcsbase.base_department dep,gmvcsb ...