单击时输入字段/文本框不会保持选中状态答案

【问题标题】：Input field/ text box won't stay selected when clicked单击时输入字段/文本框不会保持选中状态
【发布时间】：2012-05-07 06:12:08
【问题描述】：

我是 HTML 新手。这可能是非常基本的，但无论我做什么，我都无法让我的表单工作。每当我单击输入字段（文本区域）时，只要我按住鼠标，输入字段就会保持选中状态，但每当我释放它时，焦点就会回到表单的第一个字段。这是 HTML/CSS 吗？我不知道如何解决它。

这是我正在处理的表单的 URL (http://www.seanmccully.com/apps/langham/tea.html) — 但它现在可能已修复。可以看到不能选择名字、姓氏、城市、邮箱（只能tab输入数据）。

【问题讨论】：

标签： html css forms input

【解决方案1】：

这是因为您已将所有表单元素包装在一个 label 元素中。摆脱它，它会正常工作。

label 元素只能与单个表单控件关联，单击label 会将焦点放在其关联的控件上。由于您的label 中有多个控件，因此它与第一个控件相关联，并且随着单击事件在 DOM 上传播，单击任何其他表单控件将到达标签并使其将焦点集中到其关联控件（第一个一）。

如果您想使用label 元素，则每个控件都需要一个。您可以将span 元素更改为label 元素，并使用for 属性将该标签与控件相关联，或者您可以将每个控件包装在一个标签中：

<label class="labelstyle" for="fname">First Name</label>
<input name="fname" type="text" class="fieldstyle" id="fname" size="25" maxlength="50"/>

<!-- or -->

<label class="labelstyle">
    First Name <input name="fname" type="text" class="fieldstyle" id="fname" size="25" maxlength="50"/>
</label>

【讨论】：

好收获！我正在剖析 javascript 以寻找重新聚焦 ;)
感谢您的简要说明
非常感谢！这很有意义..我不知道为什么我没听懂
@SeanMcCully - 没问题，很高兴我能帮上忙 :)
这是一个完美答案的例子。解决了问题，原因，并通过示例提供了解决方案。谢谢你，好先生。

【解决方案2】：

我好像找到了哪里出错了：

将原始代码复制到记事本中（编写 HTML 时总是需要它）。
删除不必要的代码以更清楚地看到您的问题（例如 CSS 代码甚至脚本代码）。
然后仔细检查代码树！我在这里和那里看到标签标签！

你知道，你不应该把这个家伙放在任何地方。你让他总是集中注意力，而不是输入名为文本的家伙。所以尝试删除标签；你会检查出来的。

【讨论】：