将焦点放在输入上并更改 li 背景颜色

Question

这个 function 允许我创建新的 li 元素和 append 它到我当前的待办事项列表。

 var newListElement = "<li>" + '<input type="checkbox"/>' + "<label>" + '<input [type="text"] placeholder="Insert your new task here"/>' + "</label>" + '<div class="arrow-btn"></div>' + "</li>"; $("ul.todo-list").append(newListElement);

在这个 function 中，我想将 cursor 设置为我的输入文本字段，并希望在新创建 li 元素时将其背景更改为灰色。 但是每当我创建一个新的 li 元素时，li 元素的颜色不会改变，我也不能将 cursor 自动设置为输入字段。 只有当我用鼠标在 li 元素上新创建的输入字段中手动单击时，li 元素的背景才会发生变化。

 //change last added list element to grey $('input:text').focus(function () { setEditModeItem($(this).closest('ul.todo-list > li')); });

我的问题是有没有办法将焦点动态设置到输入字段并检查它是否有焦点？

Answer 1

您可以通过在所选元素上调用.focus()方法来触发 jQuery 中的焦点，我添加了 CSS 背景红色以突出显示焦点上的输入，请注意，您可以使用模板文字连接字符串，这是一个工作片段：

 var newListElement = `<li> <input type="checkbox"/> <label> <input [type="text"] placeholder="Insert your new task here"/> </label> <div class="arrow-btn"></div> </li>`; $("ul.todo-list").append(newListElement); // this is how to trigger focus on input: $("ul.todo-list li:last-child").find("input").focus(); //change last added list element to grey $("input:text").focus(function () { //setEditModeItem($(this).closest('ul.todo-list > li')); });

 ul.todo-list input:focus { background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="todo-list"></ul>