将输入创建为输入的子项答案

【问题标题】：Create input as child of input将输入创建为输入的子项
【发布时间】：2023-03-30 12:41:02
【问题描述】：

是否可以创建一个作为文本子级的按钮？

<input type="text">
    <input type="button" />
</input>

我问的原因是我想做一个组合框。见this fiddle。在 jquery 中执行此操作，按钮不会出现。在常规 html 中执行此操作，第二个输入不是第一个输入的子项（至少在 Chrome 中）。

我可以将文本和按钮放在一个跨度中，但我更喜欢像示例中那样创建文本框，以便稍后可以像这样检索值：$("#test).val();

PS 我知道存在其他组合框插件。我想自己动手学习一下。

【问题讨论】：

那是一个无效的 html。你不能有这样的东西。

标签： jquery html dom

【解决方案1】：

这是不可能的，因为input 是一个内联元素 - 它不能有子元素。

【讨论】：

【解决方案2】：

这将导致 HTML 无效，因此无法执行此操作。你可以做的是创建一个div，它是一个块元素，并用一个文本框+按钮的内联元素填充它。

通过 CSS 中的一些样式，您可以使您的 div 看起来像一个文本框，而您的文本框像一个 div，没有边框和斜面。产生的东西看起来像你在这里想要实现的东西。

要摆脱输入的文本框外观，请使用#YourTextBox {border: none;}

【讨论】：

【解决方案3】：

正确答案是input 标签是一个void element，它不能有任何孩子。 span 等内联元素可以有子元素。

Void 元素只有一个开始标签；不得指定结束标签用于 void 元素。

即在 HTML5 中，永远不能有结束标记，即不要使用 </input>。 HTML5 不是 XML，它强烈反对自闭标签 (/>)，即<input /> 不是严格正确的 HTML5（尽管它可以用于兼容性目的）。 HTML5 中定义的 void 元素标签列表为：area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr。

【讨论】：

【解决方案4】：

这不是以这种方式嵌套 HTML 元素的有效方法。如果你看一下 jQuery 插件的作用，它们通常会用 div 和其他东西包装你的 <select> 元素。恕我直言，您可以按照类似的方法解决问题。

【讨论】：

【解决方案5】：

输入不能有孩子，因为它们没有结束。以下是一些信息：https://www.w3schools.com/tags/tag_input.asp

【讨论】：