Question

当我们点击div时，我希望编辑框可以编辑，因为我们通过单击＆＃34; Div editable＆＃34;来完成此操作。它非常适合单个ID你能否告诉我如何为多个id设置它？ s.Thanks提前。

<table>
    <tr>
       <td>
          Editable Div (double click text to the right, to enter edit mode)  :   
       </td>
       <td>
         <div id="makeEditable">Div editable</div>
       </td>
   </tr>
</table>

(function($) {
$.fn.editable = function() {
    var textBlock = $(this);
    // Create a new input to allow editing text on double click
    var textBox = $('<input/>');
    textBox.hide().insertAfter(textBlock).val(textBlock.html());

    // Hiding the div and showing a input to allow editing the value.
    textBlock.dblclick(function() {
        toggleVisiblity(true);
    });
    // Hiding the input and showing the original div
    textBox.blur(function() {
        toggleVisiblity(false);
    });

    toggleVisiblity = function(editMode) {
        if (editMode == true) {
            textBlock.hide();
            textBox.show().focus();
            // workaround, to move the cursor at the end in input box.
            textBox[0].value = textBox[0].value;
        }
        else {
            textBlock.show();
            textBox.hide();
            textBlock.html(textBox.val());
        }
    };
};

})(jQuery);
$(function() {
    var $edit = $('#makeEditable').editable();
});

Answer 1

您可以使用contenteditable="true"

简化一些事情

<强> Working Example

基本功能

<div id="makeEditable" contenteditable="true">Div editable</div>

可选择添加一些css以使其更加用户友好

#makeEditable:focus{
    box-shadow: 0 0 2px blue;
}

MDN Documentation for Content Editable

Answer 2

只需使用这样的基本jQuery选择器： $（＆＃39;＃makeEditable，＃anotherid，＃anidagain＆＃39）

但是如果你想在多个div /元素上做它最好给所有元素一个类，并将该函数应用于该类的所有元素。您的选择器将是： $（＆＃39; .editable＆＃39）

Answer 3

你应该稍微修改一下你的逻辑。您应该为每个div元素创建单独的输入，并且在事件中，您应该通过this对当前的dblclicked或blured元素进行操作。这是JSFiddle demo，几乎没有修改。

希望它对你有所帮助。但我建议使用contenteditable属性作为@ apaul34208建议，除非你有其他自定义js逻辑。

如何在div中编辑某些文本内容？

3 个答案: