How to focus on an input text with a value using jquery?

Question

I am trying to create a todo list similar to Google Keep where when I am focusing on a particular row and when pressing:

1. enter, it will create a new list item and trasfer focus to that list item
2. backspace, it will delete current list item and focus on the previous item assuming there is one.

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

I have managed to make the enter part work but the backspace doesn't work properly.

What it's supposed to do

When current list item is empty it deletes the list item and focuses on the previous list item.

What it actually does

When current list item is empty it deletes the list item and deletes the last letter of the value of the previous list item when

$(prevElement).focus(); 

is invoked (which I find weird).

Answer 1

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

Answer 2

You should add event.preventDefault(); after $(prevElement).focus(); . This will prevent the last letter of the previous item to be deleted.

jQuery preventDefault documentation