如何使用jquery專注於帶有值的輸入文本？

Question

我試圖創建一個類似於Google Keep的待辦事項列表，當我專注於特定行並按以下鍵時：

1. 輸入，它將創建一個新的列表項並將焦點轉移到該列表項
2. 退格鍵，它將刪除當前列表項，並假設存在一項，則將焦點放在前一項上。

HTML

    <div class="col-sm-2">
        <h2>Plan</h2>
        <ul class="list-group list-group-sortable todo-list">

            @foreach (Models.ViewModels.PlanViewModel plan in Model.listPlan)
            {
            <li class="sortable list-group-item">
                <div class="d-inline">
                    <span class="text"><input id="@plan.Id" sort="@plan.Sort" class="plans" type="text" value="@plan.Description" /></span>
                    <span class="tools">
                        <i class="editPlan fa fa-thumb-tack"></i>
                        <i class="deletePlan fa fa-trash-o"></i>
                    </span>
                </div>
            </li>
            }
            <li class="list-group-item non-sortable disabled" style="height:55px;">
                <div style="float: right;">
                    <button id="savePlan" class="btn btn-info btn-group-sm">Save</button>
                    <button id="clearPlan" class="btn btn-default  btn-group-sm">Clear</button>
                </div>
            </li>
        </ul>
    </div>

使用Javascript

        $(document).on("keydown", "input.plans", function (event) {
            var KeyID = event.keyCode;

            //on keypress enter 
            if (KeyID == 13) {
                $('<li class="sortable list-group-item"><div class="d-inline"><span class="text"><input class="plans" type="text" /></span><span class="tools"><i class="editPlan fa fa-thumb-tack"></i><i class="deletePlan fa fa-trash-o"></i></span></div></li>').insertAfter($(this).parent().parent().parent()[0]);
                $(this).parent().parent().parent().next().find('input').focus();
            }
            //on keypress backspace
            else if (KeyID == 8 && $(this).val().trim() === '') {
                var prevElement = $($(this).parent().parent().parent().prev().find('input')[0]);
                $(this).parent().parent().parent().remove();
                $(prevElement).focus(); //This doesn't focus on previous List Item
            }
        });

我設法使Enter零件正常工作，但退格鍵無法正常工作。

應該做什么

當當前列表項為空時，它將刪除該列表項並集中在上一個列表項上。

它實際上是做什么的

當前列表項為空時，它將刪除列表項，並刪除前一個列表項的值的最后一個字母

$(prevElement).focus(); 

被調用（我覺得很奇怪）。

Answer 1

您的退格操作仍然存在，您需要使用event.Handled = True來“取消”它。

Answer 2

您應該添加event.preventDefault(); 在$(prevElement).focus(); 。 這將防止刪除上一項的最后一個字母。

jQuery preventDefault文檔