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

二、

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

2、按enter键可发送

三、代码部分

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 { width:240px; height:200px; border:1px solid #333; background:#f1f1f1; padding:10px; }
</style>
<script>
window.onload = function (){
var oDiv = document.getElementById('div1');
var oStrong = document.getElementById('strong1');
var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn1');
var str='';
function Say(){
str += oStrong.innerHTML + oText.value +'<br>';
oDiv.innerHTML = str;
oText.value = '';
}
oBtn.onclick = Say;
document.onkeydown=function(event){
var e = event || window.event;
if(e && e.keyCode==13){ // enter 键
Say();
}
};
};
</script>
</head> <body> <div id="div1"></div>
<strong id="strong1">张三:</strong>
<input id="text1" type="text" />
<input id="btn1" type="button" value="提交" /> </body>
</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. 【线段树】Gym - 100507C - Zhenya moves from parents

    线段树每个结点维护两个值,分别是这个区间的 负债 和 余钱. 按时间顺序从前往后看的时候,显然负债是单调不减的. 按时间顺序从后往前看的时候,显然余钱也是单调不减的,因为之前如果有余钱,可能会增加现在 ...

  2. 【可持久化Trie】【set】bzoj3166 [Heoi2013]Alo

    枚举每个数,计算以其为次大数的最大区间,显然,只需要用这个区间的答案 对 答案进行更新即可. 找到每个数右侧.左侧第1.2个比它大的数,然后分类讨论一下即可. 找到的过程中把数sort以后,从大到小把 ...

  3. Spring入门程序-前端控制器配置器

    1,处理器的第二种配置方式 <!--配置handler --> <bean id="/FirstController" class="com.songy ...

  4. 连接sqlexpress

    sqlexpress在visualstudio安装时可选择安装. 数据源添加 localhost\sqlexpress window身份认证即可.

  5. 设置cookie和查找cookie的方法

    1.设置cookie(名称,值,过期时间) function setCookie(key,value,d){ if(d === undefined){ document.cookie = encode ...

  6. (原创)sklearn中 F1-micro 与 F1-macro区别和计算原理

    最近在使用sklearn做分类时候,用到metrics中的评价函数,其中有一个非常重要的评价函数是F1值,(关于这个值的原理自行google或者百度) 在sklearn中的计算F1的函数为 f1_sc ...

  7. shell中单引号、双引号、反引号的区别

    '单引号' 忽略所有特殊字符 "双引号" 忽略大部分特殊字符,除了$  ` `反引号` 输出执行结果

  8. [Node.js] Show More Lines in a Node.js Error Stack Trace

    Sometimes you are one or two lines short from finding the cause of the error in the stack trace but ...

  9. 9.11排序与查找(三)——给定一个排序后的数组,包括n个整数,但这个数组已被旋转过多次,找出数组中的某个元素

    /**  * 功能:给定一个排序后的数组.包括n个整数.但这个数组已被旋转过多次,次数不详.找出数组中的某个元素.  * 能够假定数组元素原先是按从小到大的顺序排列的.  */ /** * 思路:数组 ...

  10. ssh之<context:component-scan base-package="com.xx" />

    <context:component-scan/> 配置项不但启用了对类包进行扫描以实施注释驱动 Bean 定义的功能, 同时还启用了注释驱动自动注入的功能 ( 即还隐式地在内部注册了 A ...