将焦点设置为输入并更改 Li 背景颜色

Question

这个函数允许我创建新的li元素并将其附加到我当前的待办事项列表中。

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

在此函数中，我想将光标设置为我的输入文本字段，并希望在新创建 li 元素时将其背景更改为灰色。但是每当我创建一个新的 li 元素时，li 元素的颜色不会改变，我也不能自动将光标设置为输入字段。仅当我在 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>