JS DOM -- 关于回车键盘事件执行事件
一、需求制作一个模拟对话框,
二、
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 -- 关于回车键盘事件执行事件的更多相关文章
- 用js写一个回车键盘事件
用js来监听键盘事件,代码如下: <script type="text/javascript" language=JavaScript charset="UTF-8 ...
- js dom添加回车事件
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta ...
- 手机端点击键盘无法获取keyCode值的部分时隐藏键盘并执行事件
用计时器监视window.innerHeight高度改变来判断.触发键盘其他地方也有事件反应 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- 获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners
偶尔看到了这个问题,如何用JS获取元素某一事件上绑定的所有Listener? 突然觉得好像是有解决办法的,查了下,在 chrome 下,支持 window.getEventListeners(obj) ...
- js关闭或者刷新页面后执行事件
onbeforeunload 使用方法 window.onbeforeunload=function(){ return ''; } 有返回值才能弹出显示,或者有需要执行的事件也行.
- js dom元素加载完成执行
//dom ready执行 function ready(fn){ if(document.addEventListener){ document.addEventListener('DOMConte ...
- js Dom为页面中的元素绑定键盘或鼠标事件
html鼠标事件 onload 页面加载 onclick 鼠标单击 onmouseover 鼠标移入 onmouseout 鼠标移出 onfocus 获取焦点 onblur 失去焦点 onchange ...
- JS DOM属性+JS事件
DOM属性 console.log(ele.attributes) 获取ele元素的属性集合 ele.attributes.getNamesItem(attr).nodeValue 获取指定属性值 e ...
- js监听回车事件
标题通俗的说,也就是绑定当用户按下回车键要执行的事件. 下面,入正题. 第一步,先编写简单的页面代码,这里我们只需要一个按钮就足够了.当然,还有按钮事件. <html> <head& ...
随机推荐
- python3 开发面试题(创建表结构)6.9
纯sql语句写出: '''设计 图书管理系统 表结构: - 书 - 书名 - 作者 - 姓名 - 出版社 - 出版社名称 - 地址 一本书只能由一家出版社出版 --> 多对一(书对出版社) 一本 ...
- RowState 介绍
RowState 介绍 从不同位置载入 DataRow 后 RowState 的状态修改, 更改, 删除后的 DataRow.RowState 转化使用 AcceptChanges, RejectCh ...
- SQLServer组成:
SQL Server DB Engine (Relational Engine),SQL语言用于向Engine描述问题. Algebrizer:代数器,检查语法,并将查询转换成内部表达式 Query ...
- Delphi 设置时间格式
// 设置WINDOWS系统的短日期的格式SetLocaleInfo(LOCALE_SYSTEM_DEFAULT, LOCALE_SSHORTDATE, 'yyyy-MM-dd'); Applicat ...
- Zookeeper的功能以及工作原理(转)
本文转自https://www.cnblogs.com/felixzh/p/5869212.html Zookeeper的功能以及工作原理 1.ZooKeeper是什么?ZooKeeper是一个分 ...
- VBA数组
基础用法,这篇写的不错:https://www.cnblogs.com/wuzhiblog/p/7137578.html
- iOS:Objective-c的MD5/SHA1加密算法的实现
介绍: Objective-c实现MD5和SHA1算法相对还是比较简单的,可以直接调用系统的C/C++共享库来实现调用MD5即Message Digest Algorithm 5(信息-摘要算法 5) ...
- Yii2系列教程:安装及Hello World
http://www.yiiframework.com/ 安装Yii2 打算从头开始,所以,连安装Yii2也稍微写一点吧.安装Yii2最好的方式就是使用composer: composer globa ...
- Spark(七) -- Scala快速入门
Scala作为Spark的开发语言,想要成为Spark高手,精通Scala是必须要走的一条路 然后一门语言并不是你想精通就能够精通的,更何况是Scala这种面向对象又面向函数的编程语言,个人觉得其学习 ...
- Material Design学习之 Bottom navigation
转载请注明出处:王亟亟的大牛之路 礼拜4一天由于事假没有去单位然后礼拜3由于生日也没写文章,今天一早上班就补一篇MD的内容.这一篇是关于颇有争议的Bottom navigation相关内容(主要是翻译 ...