CODEWITHSUNDEEP
javascriptjqueryhtmlcss
EVH671
EVH671

Reputation: 251

How can I make a UI element editable?

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:

enter image description here

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.

Upvotes: 1

Views: 157

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337713

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

Upvotes: 1

Eduardo Pereira
Eduardo Pereira

Reputation: 880

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

Upvotes: 2

Related Questions