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

最新推荐文章于 2021-05-31 19:09:21 发布

东芃9394

最新推荐文章于 2021-05-31 19:09:21 发布

阅读量209

点赞数

分类专栏： Demo 文章标签： javascript

本文链接：https://blog.csdn.net/liurui50/article/details/105518310

版权

Demo 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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>

东芃9394

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
鼠标右击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"><...
复制链接

扫一扫