本示例绑定键盘回车键(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. 【CSP2019 D1T2】【括号树】

    题面 不再多说,想必大家都看过这个题 思路 我们可以手推几个满足条件的字符串 我们发现在这些字符串里 每个)都与离它最近的(的匹配 所以我们维护树上每个节点到根节点中没用使用过的(的位置(nl[n]) ...

  2. Atcoder Grand Contest 032 E - Modulo Pairing(乱搞+二分)

    Atcoder 题面传送门 & 洛谷题面传送门 神仙调整+乱搞题. 首先某些人(including me)一看到最大值最小就二分答案,事实上二分答案对这题正解没有任何启发. 首先将 \(a_i ...

  3. 如何根据taxid(或taxname)快速获得taxname(或taxid)?

    目录 需求 实现 需求 我有一个物种taxonomy ID的list,想获得相应的物种名,不要一个个去NCBI Taxonomy官网查.反之根据物种名list查询对应的taxid. 实现 因为之前没怎 ...

  4. Synteny和collinear的区别

    在比较基因组学的时候,经常会听到"共线性"这个词,但是与其对应的有两个不同的概念,即 (1) synteny (2) collinear 二者的区别如下图所示: 可以看到,synt ...

  5. Centos7部署RabbitMQ的镜像队列集群

    一.背景 在上一章节中,我们学会了如何搭建一个单节点的RabbitMQ服务器,但是单节点的RabbitMQ不可靠,如果单节点挂掉,则会导致消息队列不可用.此处我们搭建一个3个节点的RabbitMQ集群 ...

  6. Shell【常用知识总结】

    一.常用知识总结 1.特殊变量($0,@,#,*,?) $0:当前脚本的文件名. $n:n是一个数字,表示第几个参数. $#:传递给脚本或函数的参数个数. $*:传递给脚本或函数的所有参数.当被双引号 ...

  7. HDFS【概述、数据流】

    目录 概述 定义 优缺点 HDFS组成架构 HDFS文件块大小 HDFS数据流 写数据 读数据 网络拓扑-节点距离计算 机架感知(写数据的副本存储节点选择) 概述 定义 HDFS是一个分布式文件管理系 ...

  8. Sharding-JDBC 实现水平分表

    1.搭建环 (1) 技术: SpringBoot2.2.1+ MyBatisPlus + Sharding-JDBC + Druid 连接池(2)创建 SpringBoot 工程

  9. 基于阿里云ecs(centos 7) 安装jenkins

    1. 安装好 jdk 2. 官网(https://pkg.jenkins.io/redhat-stable/)下载rpm包(稳定版): wget https://pkg.jenkins.io/redh ...

  10. TCP协议三步挥手与四步挥手

    关于TCP协议 TCP(Transmission Control Protocol, 传输控制协议)是一种面向连接的.可靠的.基于字节流的传输层通信协议.与之对应的是UDP(User Datagram ...