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

时间:2013-10-07 23:53:55

标签: jquery html

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

4 个答案:

答案 0 :(得分:15)

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

答案 1 :(得分:4)

如果您想在文本字段中添加div,例如inputtextarea,请尝试以下操作:

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

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

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

注意:

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

答案 2 :(得分:3)

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

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

答案 3 :(得分:2)

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

见这里: Clickable icon inside input field