文本域往往可以输入大量的文字信息，但是在文本域上有一些键盘的处理事件：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. 安装rkhunter

    #!/bin/bash if [ ! -d /soft ];thenmkdir /soft fiwhich rkhunterif [ $? -eq 0 ];then echo "rkhunt ...

  2. 移动web app开发小贴士 收藏有用

    1 创建主屏幕图标 (Creating a home screen icon ,for ios)   1 2 3 4 5 6 //57*57 <link rel="apple-touc ...

  3. mof提权带回显带清楚命令版本.php

    <?php $path="c:/caonimei.txt"; session_start(); if(!empty($_POST['submit'])){ setcookie ...

  4. php 上传图片

    学习地址:http://www.imooc.com/video/2473 <?php header("content-type:text/html;charset=utf-8" ...

  5. java密码验证正则表达式校验

    ,正则表达式就是记录文本规则的代码.php密码验证正则表达式(8位长度限制)<?php //密码验证 $password = "zongzi_Abc_oo13a2"; $n ...

  6. 【iBoard电子学堂开发板例程】【12个 stm32 例程发布】

    _____________________________________ 深入交流QQ群: A: 204255896(1000人超级群,可加入) B: 165201798(500人超级群,满员) C ...

  7. Web 在线文件管理器学习笔记与总结（15）剪切文件夹 （16）删除文件夹

    (15)剪切文件夹 ① 通过rename($oldname,$newname) 函数实现剪切文件夹的操作 ② 需要检测目标文件夹是否存在,如果存在还要检测目标目录中是否存在同名文件夹,如果不存在则剪切 ...

  8. 同IP不同端口Session冲突问题

    同IP不同端口Session冲突问题 分类: tomcat2013-09-24 11:19 1146人阅读 评论(0) 收藏 举报 一个服务器上搭建了多个tomcat或者weblogic,端口不一样, ...

  9. bug 发表文章不显示图片

    bug 描述: 现象是我们这不能发布图片, 测试说患教方向是可以正常发布图片的(还是要感激测试,正是他们鞭策我们不断挑战困难,解决之,从而提高自己姿势水平). 图片没上传上去, 服务端协助查找发现没调 ...

  10. Levenshtein distance

    https://en.wikipedia.org/wiki/Levenshtein_distance 验证码识别 图片中的二维码截取