12

如何在 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

4 回答 4

21

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

于 2013-10-07T23:57:30.437 回答
5

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

请参见此处： 输入字段内的可点击图标

于 2014-12-10T07:54:13.710 回答
3

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

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

于 2013-10-07T23:58:42.140 回答
3

如果要div在文本字段内添加，例如inputortextarea然后试试这个：

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

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

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

笔记：

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

于 2013-10-08T00:01:19.137 回答