搜索
搜索

使用jQuery动态将内容可编辑的跨度文本更新为标签内部html

Shohidul Alam 发表于 Dev
36
肖希杜尔·阿拉姆（Shohidul Alam）

可能重复

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

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

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

* {
    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上的代码

rk

我刚刚添加了一个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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

多个内容可编辑，无法使用箭头键将刀体移动到跨度末尾

将文本设置为可编辑的 DIV

完全在内容可编辑div标签中显示文本

使内容可编辑div中的跨度不可编辑

使用jQuery将textarea html内容更新为iframe（实时）

如何将表格单元格更新为所选内容的可编辑字段？

允许在内容可编辑内容的末尾移出跨度

使用angularjs的内联可编辑文本不会更新记录

使用jQuery在锚标签的文本之间添加跨度标签

可编辑的内容：防止删除内部元素

如何使用JQuery使子元素的内容可编辑

如何使用JavaScript（或jQuery）使元素的内容可编辑

我如何使用jQuery获取标签元素的内部HTML文本

使跨度项目可编辑？

将多个输入字段实时更新为多个跨度标签

在可编辑div中动态创建的跨度上检测退格

使用jQuery将数组显示为跨度

内容可编辑的字数包括默认文本

可编辑div中的内容为空

尝试使用innerHTML将html标签显示为文本

使用 jquery 在包含标签和空白的跨度内查找文本

按条件为内容可编辑的div文本字段中的字母着色

问题更新可编辑组合的文本值

如何将文本更新为标签？

如何使用原始文本处理在内容可编辑div中制作粗体文本

使用Aspose PDF可编辑为不可编辑pdf

jQuery内容可编辑的div和提交时的文本框

点击即可编辑HTML文本

JavaFX将listview设置为可编辑

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档