Question

我有一个段落，我想单击将其更改为textarea。不带一些额外的按钮，而是直接单击段落本身，然后使用javascript或jquery在当前文本区域之外单击以进行编辑后返回段落。有什么建议么？谢谢！

Answer 1

这是我的输入。

我使用了contenteditable属性来切换div的编辑。

$(document).on('click', function(e) {
	$('.textarea').attr('contentEditable', false);
});

$('.textarea').on('click', function(e) {
	$(this).attr('contentEditable', true);
	e.stopPropagation();
});

.textarea {
	border: 1px solid;
}

[contenteditable="true"] {
	border: 2px solid red;
}

span {
	background: grey;
	padding: 1.25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textarea" contenteditable="false">
	Hello World. This is a super awesome paragraph that you can edit using <span>contenteditable</span> attribute on click.
</div>

Answer 2

请尝试以下代码来解决您的问题：

$('#myDiv').click(function(e){
    
    $('p').contents().unwrap().wrap('<textarea/>');
    e.stopPropagation()
    
});

$('#myBdy').click(function(){

 $('textarea').contents().unwrap().wrap('<p/>');
   
});

#myDiv {
  display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="myBdy">
<div id="myDiv">
<p id="myP">Hi</p>
</div>
</body>

单击时，将p更改为texarea字段

2 个答案: