JavaScript:文本域事件处理

转载 2018年04月15日 21:13:21
<!doctype html>
 <html lang = "zh-CN">
 <head>
<!--文本域往往可以输入大量的文字信息,但是在文本域上有一些键盘的处理事件:
onkeydown、onkeypress、onkeyup。-->
<!--限制输入的字数,超过字数不能提交
注意: onkeypress 事件在所有浏览器中不能触发所有按键(例如:ALT, CTRL, SHIFT, ESC) 。
如果只对用户是否已经按下一个按键检测, 可以使用 onkeydown 取代, onkeydown被所有按键触发。
注意: onkeypress 属性不能使用与以下元素: <base>, <bdo>, <br>,
<head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。-->


     <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>

JavaScript常见事件处理方法

1、事件处理 ev.clientX  ev.clientY  获得鼠标在屏幕上的横纵坐标 ele.addEventListener('click',doSomething,true)  // True...
  • Admin_yi
  • Admin_yi
  • 2017-01-04 16:40:13
  • 210

JavaScript 控制textarea(文本域)的输入字数

目录: 需求 思路 代码 1. 需求 限制文本域的输入字数 能够看到还可输入字数和超出字数 如果超出字数禁止提交 将中文视为一个字符,将英文视为半个字符,也就是两个英文字符按一...
  • youth99dream
  • youth99dream
  • 2016-07-11 01:50:10
  • 908

javascript 文本框

在HTML中,有两种方式表示文本框:一种是用标签,其type值设置为text,这种设出来使单行文本框,另一种是多行文本框,使用。他们之间有一些重要的区别。 标签:通过设置size特性,能够指定显示的...
  • Elna_99
  • Elna_99
  • 2016-10-19 20:11:10
  • 167

javascript的事件三要素

事件三要素包含 事件源  是指那个元素引发的事件。比如当你点击cdsn图标的时候,会跳转到cdsn首页。那么这个cdsn图标就是事件源。 再或者,可以这样理解, 当你对某个元素执行动作的时候...
  • shenkeding9350
  • shenkeding9350
  • 2018-01-23 12:51:57
  • 45

上最详细的JavaScript事件使用指南

史上最详细的JavaScript事件使用指南 2015-05-19 09:55 涂根华的博客 字号:T | T 事件流 事件流描述的是从页面中接收事件的顺序,IE和Nets...
  • wsl888444
  • wsl888444
  • 2015-05-19 10:45:37
  • 1807

java'文本域额验证

  • 2010年07月28日 15:45
  • 281B
  • 下载

JavaScript 事件模型 事件处理机制

这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时之需。 什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的...
  • chenmoquan
  • chenmoquan
  • 2013-08-21 21:10:38
  • 13634

JavaScript事件处理

  • 2008年10月19日 09:05
  • 980KB
  • 下载

核心模块,事件驱动-03

1. 全局对象 2. 常用工具util 3. 深入事件驱动event对象 4. 文件系统fs模块 5. 深入了解服务器与客户端...
  • maweichao90126
  • maweichao90126
  • 2016-06-20 16:03:34
  • 246

文本域里字体颜色问题

IECN.NET :: 专注Web技术 体验开发乐趣 ttt.appendChild(document.createTextNode("aaaaaaaa"));var bbb = document.c...
  • ytbada
  • ytbada
  • 2007-04-13 12:14:00
  • 795
收藏助手
不良信息举报
您举报文章:JavaScript:文本域事件处理
举报原因:
原因补充:

(最多只允许输入30个字)