使用 jQuery 将内容可编辑范围文本动态更新为标签内部 html答案

【问题标题】：Update content editable span text to a tag inner html dynamically with jQuery使用 jQuery 将内容可编辑范围文本动态更新为标签内部 html
【发布时间】：2016-05-20 10:05:01
【问题描述】：

possible duplicate

我一直在用 jQuery 做一个项目，我需要在所有带有类名的按钮上实时更新文本。我有可编辑的 div，但我不明白如何用可编辑的跨度文本更新按钮。当用户单击一个跨度并对其进行编辑时，我还想更新其他可编辑的跨度。

在重复的问题中，他们玩了 textarea 我不想玩 textarea 我想将 spans 文本应用到其他可编辑的 spans 和按钮。

我正在学习过程中，所以很难为我解释，这是我的代码

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    outline: none;
    
}
body {
    background-color: #4CAF50;
    font-family: arial;
    color: #FFF;
    font-size: 20px;
    text-align: center;
}
.button {
    background-color: #FFF;
    display: block;
    padding: 20px 5px;
    margin: 20px 20px 0px 20px;
}
.btn {
    background-color: #F44336;
    padding: 5px 10px;
    font-size: 20px;
    cursor: pointer;
}
.btn:active {
    background-color: #CD3227;
    
}
.code {
    background-color: #333;
    display: block;
    padding: 20px 5px;
    margin: 0px 20px;
    
}
.btn-text {
	color: #FFF;
}
.sign {
	color: #c5c8c6;
}
.html-tag-inside {
	color: #c82829;
}
.attribute {
	color: #81a2be;
}
.equal {
	color: #3F51B5;
}
.quotation-mark {
	color: #E91E63;
}
.class-and-id-attribute {
	color: #DABA5A;
}
.slash {
	color: #549757;
}

<div class="button">
    <a class="btn">Button</a>
</div>
<div class="code">
    <span class="sign">&lt;</span><span class="html-tag-inside">a </span><span class="attribute">class</span><span class="equal">&#61;</span><span class="quotation-mark">&#34;</span><span class="class-and-id-attribute">Btn1</span><span class="quotation-mark">&#34;</span><span class="sign">&gt;</span><span class="btn-text" contenteditable="true">Button</span><span class="sign">&lt;</span><span class="slash">&#47;</span><span class="html-tag-inside">a</span><span class="sign">&gt;</span>
</div>

<div class="button">
    <a class="btn">Button</a>
</div>
<div class="code">
    <span class="sign">&lt;</span><span class="html-tag-inside">a </span><span class="attribute">class</span><span class="equal">&#61;</span><span class="quotation-mark">&#34;</span><span class="class-and-id-attribute">Btn2</span><span class="quotation-mark">&#34;</span><span class="sign">&gt;</span><span class="btn-text" contenteditable="true">Button</span><span class="sign">&lt;</span><span class="slash">&#47;</span><span class="html-tag-inside">a</span><span class="sign">&gt;</span>
</div>

jsfiddle上的代码

【问题讨论】：

尝试在 span 标签的按键事件中改变

标签： jquery html css

【解决方案1】：

我刚刚添加了一个keyup 事件处理程序。

$('[contenteditable]').on('keyup', function() {
  $(this).closest('.code').prev().find('a').html($(this).html());
})

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    outline: none;
    
}
body {
    background-color: #4CAF50;
    font-family: arial;
    color: #FFF;
    font-size: 20px;
    text-align: center;
}
.button {
    background-color: #FFF;
    display: block;
    padding: 20px 5px;
    margin: 20px 20px 0px 20px;
}
.btn {
    background-color: #F44336;
    padding: 5px 10px;
    font-size: 20px;
    cursor: pointer;
}
.btn:active {
    background-color: #CD3227;
    
}
.code {
    background-color: #333;
    display: block;
    padding: 20px 5px;
    margin: 0px 20px;
    
}
.btn-text {
	color: #FFF;
}
.sign {
	color: #c5c8c6;
}
.html-tag-inside {
	color: #c82829;
}
.attribute {
	color: #81a2be;
}
.equal {
	color: #3F51B5;
}
.quotation-mark {
	color: #E91E63;
}
.class-and-id-attribute {
	color: #DABA5A;
}
.slash {
	color: #549757;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="button">
    <a class="btn">Button</a>
</div>
<div class="code">
    <span class="sign">&lt;</span><span class="html-tag-inside">a </span><span class="attribute">class</span><span class="equal">&#61;</span><span class="quotation-mark">&#34;</span><span class="class-and-id-attribute">Btn1</span><span class="quotation-mark">&#34;</span><span class="sign">&gt;</span><span class="btn-text" contenteditable="true">Button</span><span class="sign">&lt;</span><span class="slash">&#47;</span><span class="html-tag-inside">a</span><span class="sign">&gt;</span>
</div>

<div class="button">
    <a class="btn">Button</a>
</div>
<div class="code">
    <span class="sign">&lt;</span><span class="html-tag-inside">a </span><span class="attribute">class</span><span class="equal">&#61;</span><span class="quotation-mark">&#34;</span><span class="class-and-id-attribute">Btn2</span><span class="quotation-mark">&#34;</span><span class="sign">&gt;</span><span class="btn-text" contenteditable="true">Button</span><span class="sign">&lt;</span><span class="slash">&#47;</span><span class="html-tag-inside">a</span><span class="sign">&gt;</span>
</div>

【讨论】：