JavaScript：文本域事件处理
文本域往往可以输入大量的文字信息，但是在文本域上有一些键盘的处理事件：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：文本域事件处理的更多相关文章
- Placeholdem文本域占位符符号标识JavaScript插件
Placeholdem是文本域占位符符号标识的一个JavaScript插件.占位符的值将逐步删除焦点文字,并在焦点离开逐步恢复. 在线demo:http://placeholdem.jackrugil ...
- Javascript实例技巧精选(7)—设置和获取文本框与文本域的光标位置（兼容IE和Chrome,Firefox）
>>点击这里下载完整html源码<< 截图如下: 本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置,以下代码兼容IE和Chrome,Firefox ...
- 【repost】JavaScript 事件模型 事件处理机制
什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...
- 解决：HTML中多文本域(textarea)回车后数据存入数据库，EL表达式取出异常。
问题描述: 当多文本域(textarea)回车后数据存入数据库. EL表达式取出异常,值换行倒置页面报错. 问题解决: 存值脚本代码,提交前转换\n为<br/>. <script t ...
- [转]理解JavaScript中的事件处理
什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...
- 理解JavaScript中的事件处理
什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...
- JS-007-富文本域操作
在日常 web 编写过程中,富文本域几乎成为了一个网站不可页面元素,同时,其也有着各种各样的实现方式,网络上也存在着各种各样的集成插件可供引用.此文以 js 获取.修改 163 邮箱写邮件时的邮件内容 ...
- 理解JavaScript中的事件处理 阻止冒泡event.stopPropagation();
原文地址:http://www.cnblogs.com/binyong/articles/1750263.html 这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时 ...
- 转：JS在文本域鼠标指定位置插入文本-柯乐义
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Vim 学习资料
VIM中文手册 简明 Vim 练级攻略 所需即所获:像 IDE 一样使用 vim
- [LintCode] Implement Trie 实现字典树
Implement a trie with insert, search, and startsWith methods. Have you met this question in a real i ...
- 【转载】存储scale-up和scalce-out架构
转自:存储scale-up和scalce-out架构 存储scale-up和scalce-out架构 Scale-up,即纵向扩展架构.从下面的拓扑图我们可见,纵向扩展是利用现有的存储系统,通过不断增 ...
- VR制作的规格分析
因为UE4的演示资源更丰富一些,我这边把UE4的有代表性的演示都跑了一遍,同时也通过Rift确认效果,和里面的资源制作方式. 首先,UE4是基于物理渲染的引擎,大部分都是偏向图像真实的.使用的材质 ...
- Navicat for MySQL数据库管理工具
官网下载地址:http://www.navicat.com/download/navicat-for-mysql //如图所示成功建立连接 Host Nmae/Ip Adress:localhost ...
- a single statement, not multiple statements
http://dev.mysql.com/doc/refman/5.7/en/prepare.html Statement names are not case sensitive. preparab ...
- 7添加一个“X”到HTML：转到XHTML
XHTML中的X代表extensible,是以XML为基础的另一种说法.XML表示可扩展的标记语言. XML是一种可以用来开发新的标记语言的语言,而HTML只是一门标记语言. HTML转化为XHTML ...
- P1032 字串变换
最近在练习bfs,看到了02年提高组的这个题,顿时来了兴致,联想到前一阵子的八数码问题,具体就是使用一个字符串来存储状态,把他存储到一个图中,然后开始bfs,如果10步之内无法完成就剪枝,同时使用哈希 ...
- Machine Learning in Action – PCA和SVD
降维技术, 首先举的例子觉得很好,因为不知不觉中天天都在做着降维的工作 对于显示器显示一个图片是通过像素点0,1,比如对于分辨率1024×768的显示器,就需要1024×768个像素点的0,1来表示, ...
- poj1012约瑟夫
#include<stdio.h>int a[14];int f(int k,int m){ int n,i,s; n=2*k;s=0; for(i=0;i<k;i ...