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

Question

如何在html表单的文本字段中放置div

<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>");
});

Answer 1

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

Answer 2

如果您想在文本字段中添加div，例如input或textarea，请尝试以下操作：

$("input#skills").val("<div style='background:green;'>"+skbl+"</div>");

这将更新整个字段。你可以试试这个：

$("input#skills").append(new_val); 

注意：

您可以在HTML中使用input值。但是你会得到其他服务器方面的问题。所以这就是为什么我猜Colandus要求你不要在那里写，但是他的想法很好。因为你不会知道如何编辑它，浏览器会弄乱UI！

Answer 3

您不能在输入元素中放置任何其他元素，请参阅html-spec： http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4

<!ELEMENT INPUT - O EMPTY -- form control -->

Answer 4

这样做的方法是将输入和所需的div放在一个包装器div中，它应该看起来像输入 - 所需的宽度，输入的长度，并且应该有边框。内部输入应该是内联块，没有边框，宽度较小，div内部应该是内嵌块，没有边框和宽度，填充外部div的其余宽度。通过这种方式，您可以在输入中创建图像 - 图像位于内部div中，或输入内部的可单击按钮。

见这里： Clickable icon inside input field