用jQuery定义以键盘enter(回车)键输出内容

平时,我们在用软件聊天时,一般都可以直接点击回车键把信息发送给对方。下面我们就把这个原理实现出来:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
<!-- 先引入jquery库 -->
<script src="js/3.2.1jquery.min.js"></script>
	
	<style>
		*{margin:0; padding:0;}
		div{text-align: center;}
		input{height:30px;}
		h1{height:100px; background:#ccc; margin-top:15px;}
	</style>
</head>

<body>
	<div>
		输入完成后按Enter(回车)键:
		<input type="text" placeholder="请输入内容">
		<h1></h1>
	</div>
	

	<script>		
		$("input").keyup(function(e){//定义键弹起事件
			var sj=e||window.event;//定义并接收事件源对象
			if(sj.keyCode===13){//如果事件源对象的键盘码恒等于13,则执行内部代码
				$("h1").text($(this).val());//获取input输入框的内容赋予h1元素
				$(this).val("");//把input输入框的内容清空
			}
		});
	</script>
</body>
</html>

浏览器截图:

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:,
顶部