CODEWITHSUNDEEP
javascriptjquery
vaibhav agarwal
vaibhav agarwal

Reputation: 43

How to make some text content in a div editable on click?

I want a editbox editable when we click on div as we accomplish this by clicking on "Div editable".It work great for single id Can you please tell how to make it for multiple id's.Thanks in advance.

<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();
});

Upvotes: 3

Views: 4427

Answers (3)

Viktor Bahtev
Viktor Bahtev

Reputation: 4908

You should rework your logic a little. You should create separate input for every div element and in the events you should operate over current dblclicked or blured element through this. Here is JSFiddle demo with little modifications.

Hope it helps you. But I recommend to use contenteditable attribute as @apaul34208 suggested unless you have other custom js logic.

Upvotes: 0

apaul
apaul

Reputation: 16170

You could simplify things a bit by using contenteditable="true"

Working Example

Basic functionality

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

Optionally add some css to make it a little more user friendly

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

MDN Documentation for Content Editable

Upvotes: 4

Anton
Anton

Reputation: 542

Just use basic jQuery selectors like this: $('#makeEditable,#anotherid,#anidagain')

But if you want to do it on multiple divs/elements its better to give all the elements a class, and apply the function to all the elements with that class. Your selector will then be: $('.editable')

Upvotes: 0

Related Questions