鼠标右击html元素，能够编辑该元素

163 阅读 0 评论 108 点赞

我是靠谱客的博主失眠花生，这篇文章主要介绍鼠标右击html元素，能够编辑该元素，现在分享给大家，希望可以做个参考。

demo简单，直接代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<span>内容可编辑</span>
			<button onclick="edit(this)">编辑</button>
		</div>
		<script type="text/javascript">
			function edit(ele){
				// 1.获取需要编辑元素
				var needEditEle = $(ele).prev();
				var needEditEle_Text = needEditEle.text();
				
				// 2.创建input对象
				var newInputEle = document.createElement("input");
				$(newInputEle).val(needEditEle_Text);
				
				// 3.将input元素添加到需要编辑元素
				needEditEle.text("");
				needEditEle.append(newInputEle);
				newInputEle.focus();
				
				// 4.给input元素绑定键盘Enter监听事件
				$(newInputEle).keyup(function(e){
					if(e.keyCode == 13){
						needEditEle.text($(newInputEle).val());
						$(newInputEle).remove();
					}
				})
			}
		</script>
	</body>
</html>