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

二、

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. []End of 2017OI

    今年大概到此为止了,现在这个算是做一个简短的阶段性总结吧 今年打的第一场大概是省赛,当时整个人处于(迷茫,不知道选物理还是选信息+备战中考+持续摸鱼OI颓废)的状态,KMP都不会导致签到题都没有分,然 ...

  2. 【博弈论】bzoj1115 [POI2009]石子游戏Kam

    差分后与阶梯博弈很类似. #include<cstdio> using namespace std; int n,T,a[1001],ans; int main() { scanf(&qu ...

  3. 【并查集】bzoj1015 [JSOI2008]星球大战starwar

    倒着处理删点,就变成了加点,于是并查集. #include<cstdio> using namespace std; #define N 400001 int fa[N],kill[N], ...

  4. python语言实现阶乘的两种方法---递归和迭代

    阶乘的递归实现,代码如下: def factorial(n): if n==1: return 1 else: return n*factorial(n-1) number = int(input(& ...

  5. BlockTransferService 实现

    spark的block管理是通过BlockTransferService定义的方法从远端获取block.将block存储到远程节点.shuffleclient生成过程就会引入blockTransfer ...

  6. iOS页面跳转及数据传递

    转: http://blog.csdn.net/wang9834664/article/details/8025571 iOS页面跳转: 第一种 [self.navigationController  ...

  7. GraphicsLab Project之辉光(Glare,Glow)效果 【转】

    作者:i_dovelemon 日期:2016 / 07 / 02 来源:CSDN 主题:Render to Texture, Post process, Glare, Glow, Multi-pass ...

  8. SpingMVC实现集合参数(Could not instantiate bean class [java.util.List])

    需求,要求批量新增或者修改一个List,在springMVC中是不支持下面代码的写法: @RequestMapping(value = "/update", method = Re ...

  9. requireJS简介和一个完整实例

    什么是 requireJS ? requireJS 是用JavaScript编写的JS框架,主要功能是可以按不同的先后依赖关系对 JavaScript 等文件的进行加载工作,可简单理解为JS文件的加载 ...

  10. Kubernetes用户指南(四)--应用检查和调试

    一.调试 当你的应用开始运行,那么DEBUG是不可避免的问题. 早些时候,我们在描述的是如何通过kubectl get pods来获得Pod的简单状态信息. 但是现在,这里有更多的方式来获得关于你的应 ...