如何使UI元素可編輯？

Question

如果你能幫助我解決以下問題，我將很高興。 我有一個類別列表，如下所示：

我需要每當我​​點擊一個類別塊時，它將被轉換為文本框，用戶可以在其中輸入他的類別。 一旦用戶離開文本框，輸入就會保留在塊中。 這是迄今為止類別的代碼：

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

});

jsFiddle的鏈接： https ：//jsfiddle.net/hppb1cLq/1/

你能告訴我怎么做嗎？ 在此先感謝您的幫助。

Answer 1

您可以使用contentEditable="true"屬性，例如：

https://jsfiddle.net/42bvqnj9/

有關更多信息， 請訪問： https ： //developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

Answer 2

您可以在單擊span使用replaceWith()方法在其位置插入input ，也可以在input模糊上使用返回span的input 。 像這樣的東西：

$("#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>');
});

工作實例