How can I make a UI element editable?

Question

I'll be glad if you can help me on an the following issue. I have a list of categories which is look like this:

I need that each time I click on a category block, it will be transformed into textbox where the user can input his category. Once the user is out of the textbox, the input is kept within the block. Here's the code so far for the categories:

<div class="panel-body">
    <div class="dd" id="nestable">
        <ol class="dd-list" id="category-list">
            <li class="dd-item" data-id="3">
                <div class="dd-handle">
                    <span>Item 3</span>
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                </div>
            </li>
        </ol>
    </div>
</div>

.dd {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
/*    list-style: none;*/
    font-size: 13px;
    line-height: 20px;
}

.dd-list {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style-type: decimal;
/*    list-style: none;*/
}

.dd-item, .dd-empty, .dd-placeholder {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 20px;
    font-size: 13px;
    line-height: 20px;
}

.dd-handle {
    display: block;
    height: 34px;
    margin: 5px 0;
    padding: 6px 10px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #CCC;
    background: white;
    /*    background: #F6F6F6;*/
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

$(document).ready(function(){

 $("#category-list").on( "click", ".close", function( event ) {
      $(this).parent().parent().remove();
   });  

});

The link for jsFiddle: https://jsfiddle.net/hppb1cLq/1/

Can you please show me how to do it? Thanks in advance for your help.

This might help you to get started. *http://stackoverflow.com/questions/14330309/turning-a-div-into-a-input-element-and-save-data-into-a-database?answertab=active#tab-top* — zipkundan, Mar 31 '16 at 13:38

score 2 · Answer 1 · answered Mar 31 '16 at 13:41

2

You can use contentEditable="true" attribute, like:

https://jsfiddle.net/42bvqnj9/

More information at: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

answered Mar 31 '16 at 13:41

Eduardo Pereira

840
1
8
19

Eduardo, thanks a lot! but how can I make this edit along the div block of the li item ? – EVH671 Mar 31 '16 at 15:24

score 1 · Accepted Answer · answered Mar 31 '16 at 13:41

1

You can use the replaceWith() method on click of the span to insert an input in its place, and also on blur of the input to return the span. Something like this:

$("#category-list").on("click", ".close", function(e) {
    $(this).closest('li').remove();
}).on('click', 'span', function() {
    var $input = $('<input type="text" value="' + $(this).text().trim() + '" />');
    $(this).replaceWith($input);
    $input.select();
}).on('blur', 'input', function() {
    $(this).replaceWith('<span>' + $(this).val() + '</span>');
});

Working example

answered Mar 31 '16 at 13:41

Rory McCrossan

331,213
40
305
339

Rory, thanks a lot! But I see that the editbox of the input goes down. How can I set that it will be exactly fit on the div block of the li item ? – EVH671 Mar 31 '16 at 15:25
Not sure exactly what you mean, but you can change all the settings of the input as required through CSS – Rory McCrossan Mar 31 '16 at 15:39

How can I make a UI element editable?

2 Answers2