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

谁借莪１个温暖的怀抱￠ 2022-03-17 14:44 255阅读 0赞

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

二、示例图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70]

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70]: /images/20220317/43cbdd4520214981a5e03aad670188f0.png