使div可编辑 [英] make a div editable

问题描述

当用户点击编辑链接时，我需要编辑整个div（带有类容器）。使用contenteditable属性可以使div可编辑。但只有当我们双击该div时才会发生这种情况。我也不喜欢使用任何插件。因此，如果用户单击编辑按钮，则div应该是可编辑的。我是jquery的新手并且学习基本的东西。请帮忙。

I need to make a whole div(with class container) editable when the user clicks on the Edit link. Using contenteditable attribute can make a div editable. But it happens only when we double click on that div. I also do not prefer to use any plugins for that. So basically the div should be editable if the user clicks on the Edit button. I am new to jquery and learning th basic stuffs. Please help.

请找到我的Dom元素的结构

Please find the structure of my Dom elements

http://jsfiddle.net/GeJkU/248/

很抱歉更改classname。

Sorry for changing the classname.

推荐答案

将你的jsfiddle示例更新为正确的类名并且它可以工作。

Updated your jsfiddle example, to the correct class name and it works.

<div class="container ">
      <div class="container_settings_inner">
       <h4 class="fred"><div class="iconnameserver"></div> Test1</h4>
     </div>
 </div>

和

$(document).ready(function() {
    $("#edit").click(function()
    {
         $('.container_settings_inner').attr('contentEditable','true');
    });
});

您可以将焦点放在.container_settings_inner h4属性变为可编辑状态，以便用户知道或点亮他们起来了。

You could put focus on the .container_settings_inner h4 attribute when they become editable so the user knows, or light them up a bit.

http://jsfiddle.net/ QqbyS /

这篇关于使div可编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！