更新内容可编辑的文本跨度到标签内的HTML动态与jQuery

Question

possible duplicate

我一直在做与jQuery一个项目，我需要一个类名上的所有按钮实时更新的文字。我有可编辑的div，但我无法理解如何更新带有可编辑范围的文本的按钮。我也想更新其他可编辑跨度当用户点击一个跨度和编辑。

重复的问题，他们玩textarea我不想玩textarea我想申请跨文本到其他可编辑的跨度和按钮。

我在学习的过程是多么它，S挺难为我解释一下，这里是我的

* { 
 
    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 { 
 
\t color: #FFF; 
 
} 
 
.sign { 
 
\t color: #c5c8c6; 
 
} 
 
.html-tag-inside { 
 
\t color: #c82829; 
 
} 
 
.attribute { 
 
\t color: #81a2be; 
 
} 
 
.equal { 
 
\t color: #3F51B5; 
 
} 
 
.quotation-mark { 
 
\t color: #E91E63; 
 
} 
 
.class-and-id-attribute { 
 
\t color: #DABA5A; 
 
} 
 
.slash { 
 
\t 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

Answer 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 { 
 
\t color: #FFF; 
 
} 
 
.sign { 
 
\t color: #c5c8c6; 
 
} 
 
.html-tag-inside { 
 
\t color: #c82829; 
 
} 
 
.attribute { 
 
\t color: #81a2be; 
 
} 
 
.equal { 
 
\t color: #3F51B5; 
 
} 
 
.quotation-mark { 
 
\t color: #E91E63; 
 
} 
 
.class-and-id-attribute { 
 
\t color: #DABA5A; 
 
} 
 
.slash { 
 
\t 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>