jquery - 将输入创建为输入的子项

Question

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

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

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

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

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

Answer 1

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

Answer 2

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

在你的 CSS 中添加一些样式，你可以让你的 div 看起来像一个文本框，你的文本框像一个 div，没有边框和斜面。导致一些看起来像你在这里想要实现的东西。

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

Answer 3

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

void 元素只有一个开始标签；不得为 void 元素指定结束标记。

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

Answer 4

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

Answer 5

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