Question

我正在建立一个用户界面。在我的HTML中，我有一个带有一些文本的段落元素。当用户单击该段落时，<p>元素将变为显示相同文本的文本区域（用于编辑目的）。但是，为了开始在textarea中键入，用户必须再次单击才能显示光标。我如何设置它以便光标在点击时立即显示，用户可以在一次点击（而不是两次）后开始输入？

Answer 1

在点击事件中的元素上使用.focus()。

文档：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

Answer 2

使用jQuery自动对焦方法。它会帮助你。

$( ".selector" ).autocomplete({
  autoFocus: true
});

Answer 3

要使用textarea并将其作为重点，请使用Mooseman答案。然而，有一种更简单的方法来处理这种情况，其中一些东西比textarea更“笨重”。使用contentEditable属性，几乎可以编辑任何HTML元素。

示例：

<p contentEditable="true">Lorem ipsum dolor sit ame</p>

通过单击元素，将出现一个轮廓，您将能够更改文本。当元素失去焦点时，轮廓会自动消失。

您可以使用Javascript / JQuery执行任何您喜欢的操作，或者将属性动态添加到元素中（例如：当用户双击它时，或者类似的东西）。

请参阅文档here。

注意我知道这不是你问题的重点，但这会帮助你轻松实现非常相似的结果，所以我认为值得一提。

Answer 4

您可以使用JavaScript的contentEditable属性来处理这个问题，这是您想要实现的目标的演示：

meeting_users

Update A
    Set A.Price = B.Price 
FROM Table1 as A
    INNER JOIN Table2 AS B
        ON A.Name = B.Name
        and A.Description = B.Description

使用var parag = document.getElementById("paragraph"); parag.addEventListener("click", function() { this.contentEditable = "true"; }); parag.addEventListener("change", function() { this.contentEditable = "false"; });事件在<p id="paragraph">Lorem ipsum dolor sit ame</p>中设置onclick 元件。
并contentEditable = "true"事件设置<p>。

单击时在文本框上自动对焦

4 个答案: