一、需求制作一个模拟对话框，

二、

1、需要发送后，输入框清空

2、按enter键可发送

三、代码部分

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <title>无标题文档</title>
  6.     <style>
  7.         #div1 { width:240px; height:200px; border:1px solid #333; background:#f1f1f1; padding:10px; }
  8.     </style>
  9.     <script>
  10.         window.onload = function (){
  11.             var oDiv = document.getElementById('div1');
  12.             var oStrong = document.getElementById('strong1');
  13.             var oText = document.getElementById('text1');
  14.             var oBtn = document.getElementById('btn1');
  15.             var str='';
  16.             function Say(){
  17.                 str += oStrong.innerHTML + oText.value +'<br>';
  18.                 oDiv.innerHTML = str;
  19.                 oText.value = '';
  20.             }
  21.             oBtn.onclick = Say;
  22.             document.onkeydown=function(event){
  23.                 var e = event || window.event;
  24.                 if(e && e.keyCode==13){ // enter 键
  25.                     Say();
  26.                 }
  27.             };
  28.         };
  29.     </script>
  30. </head>
  31.  
  32. <body>
  33.  
  34. <div id="div1"></div>
  35. <strong id="strong1">张三：</strong>
  36. <input id="text1" type="text" />
  37. <input id="btn1" type="button" value="提交" />
  38.  
  39. </body>
  40. </html>

　　

JS DOM -- 关于回车键盘事件执行事件的更多相关文章

  1. 用js写一个回车键盘事件

    用js来监听键盘事件,代码如下: <script type="text/javascript" language=JavaScript charset="UTF-8 ...

  2. js dom添加回车事件

    <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta ...

  3. 手机端点击键盘无法获取keyCode值的部分时隐藏键盘并执行事件

    用计时器监视window.innerHeight高度改变来判断.触发键盘其他地方也有事件反应 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  4. 获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners

    偶尔看到了这个问题,如何用JS获取元素某一事件上绑定的所有Listener? 突然觉得好像是有解决办法的,查了下,在 chrome 下,支持 window.getEventListeners(obj) ...

  5. js关闭或者刷新页面后执行事件

    onbeforeunload 使用方法 window.onbeforeunload=function(){ return ''; } 有返回值才能弹出显示,或者有需要执行的事件也行.

  6. js dom元素加载完成执行

    //dom ready执行 function ready(fn){ if(document.addEventListener){ document.addEventListener('DOMConte ...

  7. js Dom为页面中的元素绑定键盘或鼠标事件

    html鼠标事件 onload 页面加载 onclick 鼠标单击 onmouseover 鼠标移入 onmouseout 鼠标移出 onfocus 获取焦点 onblur 失去焦点 onchange ...

  8. JS DOM属性+JS事件

    DOM属性 console.log(ele.attributes) 获取ele元素的属性集合 ele.attributes.getNamesItem(attr).nodeValue 获取指定属性值 e ...

  9. js监听回车事件

    标题通俗的说,也就是绑定当用户按下回车键要执行的事件. 下面,入正题. 第一步,先编写简单的页面代码,这里我们只需要一个按钮就足够了.当然,还有按钮事件. <html> <head& ...

随机推荐

  1. 【后缀数组】poj3693 Maximum repetition substring

    sa在清空方面存在一些奇怪的问题……难以ac.(留坑?)

  2. 【记忆化搜索】bzoj1048 [HAOI2007]分割矩阵

    标准差=√(Σ(xi-xba)2/n)=Σ(xi)2+xba*n-2*xba*sum.只需最小化每个分割出来的矩阵的平方和即可. #include<cstdio> #include< ...

  3. 详细User-Agent大全

    目录: Android: Android 0.* Android 1.* Android 2.* Android 3.* Android 4.* Windows Phone OS BlackBerry ...

  4. golang设计模式-成员变量赋值

    常见golang的struct赋值有两种: 1)定义变量同时初始化 val := &Options{ UID:int(1), } 2)先定义变量,再赋值 val := new(Options) ...

  5. Linux下的/etc/crontab文件和crontab -e命令区别及Crontab命令详解（转）

    /etc/crontab文件和crontab -e命令区别 1.格式不同 前者 # For details see crontabs # Example of job definition: # .- ...

  6. 关于css解决俩边等高的问题（等高布局）

    等高布局 前段时间公司需哦一个后台管理系统,左侧是导航栏,右侧是content区域.然厚刚开始用的是js 去控制的,但是当页面的椰蓉过长的时候,有与js单线程,加载比较慢,就会有那么一个过程,查找了很 ...

  7. faststone 注册码

    用户名:c1ikm密码:AXMQX-RMMMJ-DBHHF-WIHTV 或 AXOQS-RRMGS-ODAQO-APHUU

  8. ORACLE 数据库名、实例名、ORACLE_SID的区别

    数据库名(DB_NAME).实例名(Instance_name).以及操作系统环境变量(ORACLE_SID) 在ORACLE7.8数据库中只有数据库名(db_name)和数据库实例名(instanc ...

  9. Javascript高级程序设计 -- 第三章 -- 总结

    1.Javascript有几种数据类型 2.变量 Javascript有几种数据类型 JavaScript中有5种简单数据类型(也称为基本数据类型):Undefined.Null.Boolean.Nu ...

  10. OpenGL.Vertex Array Object (VAO) [转]

    http://www.cppblog.com/init/archive/2012/02/21/166098.html 一 OpenGL抛弃glEnable(),glColor(),glVertex() ...