文本域往往可以输入大量的文字信息，但是在文本域上有一些键盘的处理事件：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. empty与isset的一点使用体会

    刚在做表单提交的时候,我想检验一下数据是否存在,并用var_dump函数看一下数据.首先看使用isset()的代码 //登录函数 function login(){ if(!isset($_POST) ...

  2. android之listview

    首先建立res/layout/data_list.xml: 代码如下: <?xml version="1.0" encoding="utf-8"?> ...

  3. 2014 top100

    下面是 TOP 100 的软件列表: 1. JFinal JFinal 是基于 Java 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展. ...

  4. Error in notifier

    sudo apt-get install libnotify-bin or 在gulpfile.js第一行插入 process.env.DISABLE_NOTIFIER = true; 禁用notif ...

  5. he time that it takes to bring a block from disk into main memory

    DATABASE SYSTEM CONCEPTS, SIXTH EDITION There is a trade-off that the system designer must make betw ...

  6. RSA

    https://en.wikipedia.org/wiki/RSA_(cryptosystem)

  7. CentOS + Nginx + PHP-FPM（FastCGI） 配置CodeIgniter

    nginx官方现在已经针对centos提供了repository,所以现在可以直接通过yum来安装啦,很方便. nginx官方安装教程:http://nginx.org/en/download.htm ...

  8. 微信内置浏览器UserAgent的判断

    需求分析 现在微信火了,很多线上的APP都希望通过分享的URL或直接的URL进行产品宣传(写这篇博文的时候,听说微信下个版本将要屏蔽微信中的URL链接),这些链接都将通过微信内置的浏览器打开.PM希望 ...

  9. php判断爬虫

    function checkrobot($useragent = ''){ static $kw_spiders = 'Bot|Crawl|Spider|slurp|sohu-search|lycos ...

  10. python环境搭建

    Python下载 Python最新源码,二进制文档,新闻资讯等可以在Python的官网查看到: Python官网:http://www.python.org/ 你可以在一下链接中下载Python的文档 ...