留言板(用快捷键enter/ctrl+enter发送)

最新推荐文章于 2021-02-25 11:45:07 发布

路人甲小码

最新推荐文章于 2021-02-25 11:45:07 发布

阅读量1.4k

点赞数 5

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_44111864/article/details/87909796

版权

javascript 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

一、js实现留言板;
1.css布局：一个div,显示留言内容；
两个文本框，第一个输入留言者姓名,第二个输入留言内容；
三个发送按钮，第一个为点击发送，第二个为快捷键enter,第三个为快捷键ctrl+enter；
2.给留言内容文本框绑定onkeydown事件，通过unicode码判断按下的是哪个快捷键；

二、示例图
在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>聊天室(用快捷键发送)</title>
	<style type="text/css">
		#box{
			width:300px;
			height:400px;
			border:1px solid black;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<input id="sayerId" type="text" value="鲁迅" style="width:50px" />说:
	<input id="txtId" type="text"/>
	<input id="sendId" type="button" value="发送"/><br/>
	<input name="sendWay" type="radio" checked />ctrl+enter
	<input name="sendWay" type="radio"/>enter
</body>
</html>
<script type="text/javascript">
	function $(id){
		return document.getElementById(id);
	}
	//1、点击发送按钮发送留言内容
	function speak(){
		//获取文本款信息
		var sayer=$("sayerId").value;
		var txt=$("txtId").value;
		//将留言内容显示在div中
		$("box").innerHTML+=sayer+"说："+txt+"<br/>";
		//清空输入留言内容文本框
		$("txtId").value="";
	}
	window.function(){
		$("sendId").onclick=speak;
		//2.给留言内容文本框绑定onkeydown事件
		$("txtId").onkeydown=function(event){
			var evt=event || window.event;
			var sendWay=document.getElementsByName("sendWay");
			//判断按下的键是enter键还是ctrl+enter键
			if(sendWay[0].checked==true){
				if(evt.ctrlKey==true && evt.keyCode==13){
				speak();
				}
			}else{
				if(evt.keyCode==13){
					speak();	
				}
			}
		}
	}
</script>

路人甲小码

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
留言板(用快捷键enter/ctrl+enter发送)

一、js实现留言板;1.css布局：一个div,显示留言内容；两个文本框，第一个输入留言者姓名,第二个输入留言内容；三个发送按钮，第一个为点击发送，第二个为快捷键enter,第三个为快捷键ctrl+enter；2.给留言内容文本框绑定onkeydown事件，通过unicode码判断按下的是哪个快捷键；二、示例图&amp;lt;!doctype html&amp;gt;&amp;lt;html lang=&quot;...
复制链接

扫一扫