本示例绑定键盘回车键(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. FFT/NTT复习笔记&多项式&生成函数学习笔记Ⅱ

    因为垃圾电脑太卡了就重开了一个... 前传:多项式Ⅰ u1s1 我预感还会有Ⅲ 多项式基础操作: 例题: 26. CF438E The Child and Binary Tree 感觉这题作为第一题还 ...

  2. curl实现SFTP上传下载文件

    摘自:https://blog.csdn.net/swj9099/article/details/85292444 #include <stdio.h> #include <stdl ...

  3. 3个CSS动画库,比Animated还好用,让你的网站酷炫起来

    本文首发于https://www.1024nav.com/tools/css-animation-library 转载请注明出处 整理了日常前端开发中常用的css动画库,让你的网页动起来,可以在生成中 ...

  4. Debugging and Running MPI in Xcode

    1.安装 mpich2 与 Xcode mpich2安装地址:/usr/local/Cellar/mpich2/3.1.4/ Xcode 版本:Version 6.2 (6C131e) 2.新建工程 ...

  5. Docker Alpine Dockerfile 安装nginx,最小镜像

    Docker Alpine Dockerfile 安装nginx,最小镜像 FROM alpine MAINTAINER will ## 将alpine-linux:apk的安装源改为国内镜像 RUN ...

  6. 解决sourceforge下载文件慢的方法

    Sourceforge是一些开源软件经常用到的网站,然而国内的网站一直不稳定,如今是可以访问,但是一直无法下载,或者是下载速度慢,导致下载中断 镜像源:http://sourceforge.mirro ...

  7. kubernetes部署 etcd 集群

    本文档介绍部署一个三节点高可用 etcd 集群的步骤: etcd 集群各节点的名称和 IP 如下: kube-node0:192.168.111.10kube-node1:192.168.111.11 ...

  8. 网站性能调优实战-学相伴KuangStudy

    面对并发我们是如何优化KuangStudy网站性能的? 每个项目都会随着用户和数据的增长调整架构,来面对未来的问题,我们也不例外,在1月5号我们平台正式公测后,引起了很多观众的热烈反响,仅仅4天,注册 ...

  9. Flume(四)【配置文件总结】

    目录 一.Agent 二.Source taildir arvo netstat exec spooldir 三.Sink hdfs kafka(待续) hbase(待续) arvo logger 本 ...

  10. react动态添加样式:style和className

    react开发过程中,经常会需要动态向元素内添加样式style或className,那么应该如何动态添加呢??? 一.react向元素内,动态添加style 例如:有一个DIV元素, 需要动态添加一个 ...