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

您可以点击replaceWith()时使用span方法在其位置插入input，也可以使用input模糊返回span 1}}。像这样：

$("#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

如何使UI元素可编辑？

2 个答案: