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

二、

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. [BZOJ4817]树点涂色

    第一个操作比较麻烦,但可以看出它和lct里的access操作差不多,所以可以利用lct的性质巧妙维护操作1 直接用lct维护树中同颜色的链(因为染色操作是从$x$染到根所以同颜色的点一定形成一条链), ...

  2. Spring Boot中使用MyBatis注解配置详解

    传参方式 下面通过几种不同传参方式来实现前文中实现的插入操作. 使用@Param 在之前的整合示例中我们已经使用了这种最简单的传参方式,如下: @Insert("INSERT INTO US ...

  3. iOS UILabel自定义行间距

    NSString *hintStr = @"输入材料标题搜索材料\n注:可根据材料序号直接搜索, 如TPO23"; CGSize size = [toolset returnTex ...

  4. 可见性-volatile

    出处: http://blog.csdn.net/vking_wang/article/details/9982709

  5. CentOS 6.9系统时间和硬件时间设置（转）

    总结一下hwclock,这个容易晕: 1)/etc/sysconfig/clock 文件,只对 hwclock 命令有效,且只在系统启动和关闭的时候才有用(修改了其中的 UTC=true 到 UTC= ...

  6. WPF附加属性的Set函数不调用的问题

    今天写程序的时候用到了附加属性,我是用VS内置的propa的代码段来实现的,代码如下: class Attach    {        public static bool GetIsEnabled ...

  7. Delphi Delay 延时计数的功能。 下面的方法都是思路，但是没有用在项目上

    procedure Tfrm_InstrumentControl.aa;var CurLength: Word; vTimeLength: Word;begin Screen.Cursor := cr ...

  8. Jenkins持续集成实战总结

    原文:https://my.oschina.net/CandyDesire/blog/341331#comment-list 持续集成 什么是持续集成 随着软件开发复杂度的不断提高,团队开发成员间如何 ...

  9. cmd不是内部命令解决方法

    当进入cmd之后,经常会出现这样的提示“不是内部命令”等,给一些习惯使用cmd排查故障的IT管理员带来了困扰,现将解决方法介绍一下,希望能帮助你. 1.看看你机子里的 c:\windows\syste ...

  10. photo sphere viewer使用图像数据替代路径来生成全景图

    photo sphere viewer是一个js库,用来将全景图片生成360度的全景图像,但是其要求传入的是个路径.如何使用数据代替路径生成图像. 我采用的方法是用img标签生成图像,然后调用img. ...