如何将div放入输入类型的文本中

Question

如何将 div 放入 html 表单的文本字段中

<h2>Skills</h2>
<label for="skills">Choose your skills</label>
<input id="skills" type="text"/>

请注意我的英语不好。所以我不能告诉你更多。

我只想在每个 div 中渲染每个技能。

我的 jquery 代码（以逗号分隔）是：

 $("input#skills").keydown(function(e){
   if(e.which===188){
      var skbl = $.trim($("input#skills").val());
      $("input#skills").append("<div style='background:green;'>"+skbl+"</div>");
});

原文由 Rajesh Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能在输入中放置任何元素。输入不包含任何 HTML。

---

解释

在 HTML 中，input 元素是 void 元素，这意味着它没有结束标记，并且不能在其中包含任何其他元素。这是因为 input 元素用于输入数据，例如文本或数字，而不是用于保存其他 HTML 元素。

考虑一下：

 <input type="text" placeholder="Enter your name">

<input> 标签不会（也不能）以 </input> ，因此它不能包含任何 HTML。 value 也不允许其中包含任何 HTML，仅允许纯文本。

原文由 Colandus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这样做的方法是将输入和想要的 div 放在包装 div 中，它应该看起来像输入 - 想要的宽度、输入的长度并且应该有边框。里面的输入应该是内联块，没有边框，宽度更小，里面的 div 应该再次是内联块，没有边框，有宽度，填充外部 div 的其余宽度。通过这种方式，您可以在输入中制作图像 - 图像位于内部 div 或输入内的可点击按钮中。

请参阅此处： 输入字段内的可单击图标

原文由 tsveti_iko 发布，翻译遵循 CC BY-SA 3.0 许可协议