本示例绑定键盘回车键(Enter),触发发送WebSocket消息动作

<script type="text/javascript">
//监控键盘Enter 回车键按下的动作
document.onkeydown = function(e){
if((e||event).keyCode==13)
sendMsg();
};
///////////////ws创建&监控接收消息处理动作///////////////////////// //创建ws协议连接,创建出来后就已经和服务端建立连接
var ws = new WebSocket("ws://127.0.0.1/chat?username={{current_user}}");
/////////////////////收到WebSocket消息//////////////////////////
ws.onmessage = function(recv) {
// $("#contents").append("<p>" + recv.data + "</p>"); //jquery 向div中添加内容 var div = document.getElementById('contents');
div.innerHTML = div.innerHTML + recv.data + '<br>';
div.scrollTop = div.scrollHeight; //当前div的滚轮始终保持最下面 };
////////////////////发送WebSocket消息////////////////////////
function sendMsg() {
$('#msg').val($('#msg').val().trim());//去除输入前后的空格
var msg = $("#msg").val();
if ( msg && msg.length >0) {
data = {
// username:username,
msg:msg
};
ws.send(JSON.stringify(data));
$("#msg").val("");
}else {
console.log('内容不许为空')
}
}
</script>

HTML界面监控键盘回车Enter按下并绑定动作的更多相关文章

  1. C#按回车Enter使输入焦点自动跳到下一个TextBox的方法收集

    在录入界面中,用户往往需要按回车键时光标自动跳入下一个文本框,以方便录入操作.在C#中实现该功能有多种方法,以下是小编收集的不使用TAB键,而直接用回车键将光标转到下一个文本框的实现方法. 一.利用W ...

  2. 键盘enter事件时间页面绑定

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 解决input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能

    最近做项目遇到: 背景:点击单元格,easyUI自动生成input可编辑框. 问题点:input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能 要实现需求: 1.回车键 ...

  4. cxgrid回车移到下一个单元格

    cxgrid回车移到下一个单元格   cxgrid回车移到下一个单元格 作用:表格式录入全键盘操作. 设置cxgrid1Dbtableview1.optionsBehavior.goToNextCel ...

  5. [Winform]通过钩子监控键盘操作和鼠标移动

    摘要 有这样一个需求,在程序隐藏之后,需要监控当前电脑是否有操作,如果1分钟内,无操作,则弹出视频,循环播放. 解决办法 从网上找的一个解决办法,可以通过钩子的方式实现,这里记录一下. /// < ...

  6. 浏览器中回车(Enter)和刷新的区别是什么?[转载]

    在浏览器中回车和F5刷新有什么区别那?今天就来说说:浏览器中回车(Enter)和刷新的区别是什么? 这点事. 概论: 1.回车在 Expires有效的时候,是不会去请求服务器的,打开调试看到的请求也只 ...

  7. 【ABAP系列】SAP ABAP 如何控制Dialog中的键盘(回车)功能

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 如何控制Dia ...

  8. Zookeeper从入门到精通(开发详解,案例实战,Web界面监控)

    ZooKeeper是Hadoop的开源子项目(Google Chubby的开源实现),它是一个针对大型分布式系统的可靠协调系统,提供的功能包括:配置维护.命名服务.分布式同步.组服务等. Zookee ...

  9. winform窗体绑定监控键盘事件

    直接注册是触发不了的, 例如: 总是不能触发. 需要在窗体设置一直属性: 大概意思是在无论窗体的那个子元素获得焦点,都将触发监控键盘的事件.

随机推荐

  1. 从记账软件看工具类APP的存量运营之道

    随着移动互联网的发展,APP的种类越来越多,一些工具类 APP 增长乏力,难以实现长期增长.只有提高用户留存时间,实现流量变现,才能在激烈的市场竞争中持续发展. 工具类APP的特点: 替代性很强: 用 ...

  2. 【POJ3614 Sunscreen】【贪心】

    题面: 有c头牛,需要的亮度在[min_ci,max_ci]中,有n种药,每种m瓶,可以使亮度变为v 问最多能满足多少头牛 算法 我们自然考虑贪心,我们首先对每头牛的min进行排序,然后对于每种药,将 ...

  3. SQL- case when then else end 用法经验总结

    对case when 的理解总结: 1.then和else后,只能写一条输出语句且输出结果就是新生成列的值;when 后的条件判断可以有多条,且可以多个字段联合判断:end 后的输出也可以有多条,但必 ...

  4. js变量作为数组对象的键值方法

    js变量作为数组对象的键值方法,变量键值获取数组值 js也可以像php的数组一样用下标获取数组的值,方法是: var arr = {'key':'abc'}; var key = 'key'; con ...

  5. typora 图床配置方法

    学习计算机的同学,在日常学习中难免会记笔记,写文档.相信大家记笔记大部分使用的都是 Markdown 吧,如果到现在还没接触,那我强烈建议你去学习一下,大概几分钟就可以搞定它. 注:下文用到的所有软件 ...

  6. 巩固javaweb第十二天

    巩固内容: HTML 图像- 图像标签( <img>)和源属性(Src) 在 HTML 中,图像由<img> 标签定义. <img> 是空标签,意思是说,它只包含属 ...

  7. 🏆【Alibaba中间件技术系列】「Sentinel技术专题」分布式系统的流量防卫兵的基本介绍(入门源码介绍)

    推荐资料 官方文档 官方demo Sentinel 是什么? 随着微服务的流行,服务和服务之间的稳定性变得越来越重要.Sentinel 以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度保护 ...

  8. Elasticsearch【基础入门】

    目录 一.操作index 1.查看index 2.增加index 3.删除index 二.操作index 1.新增document 2.查询type 全部数据 3.查找指定 id 的 document ...

  9. HTML5 之 FileReader 的使用 (二) (网页上图片拖拽并且预显示可在这里学到) [转载]

    转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511645.shtml FileReader 资料(英文): https://de ...

  10. Linux学习 - 正则表达式

    一.正则表达式与通配符 正则表达式:在文件中匹配符合条件的字符串,正则是包含匹配 通配符:用来匹配符合条件的文件名,通配符是完全匹配 二.基础正则表达式 元字符 作用 a* a有0个或任意多个 . 除 ...