jQuery 如何将 div 放在输入类型文本中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19236778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put div inside input type text
提问by Rajesh Kumar
How can i put a div inside text field of a html form
如何在 html 表单的文本字段中放置一个 div
<h2>Skills</h2>
<label for="skills">Choose your skills</label>
<input id="skills" type="text"/>
Please note my english is not good. So i can't tell you more.
请注意我的英语不好。所以我不能告诉你更多。
I just want to render each skill in each div.
我只想渲染每个div中的每个技能。
my jquery code(separated by comma) is :
我的 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>");
});
回答by Colandus
You can't place any element inside an input. An input does not contain any HTML.
您不能在输入中放置任何元素。输入不包含任何 HTML。
回答by tsveti_iko
The way to do that is to put the input and the wanted div inside a wrapper div, which should look like the input - the wanted width, length of the input and should have border. The input inside should be inline-block, without border and with smaller width and the div inside should be again inline-block, without border and with width, filling the rest of the width of the outside div. In this way you can make an image in input - the image is in the inside div, or clickable button inside the input.
这样做的方法是将输入和想要的 div 放在一个包装器 div 中，它应该看起来像输入 - 想要的宽度、输入的长度并且应该有边框。里面的输入应该是inline-block，没有边框和较小的宽度，里面的div应该是inline-block，没有边框和宽度，填充外部div的其余宽度。通过这种方式，您可以在输入中制作图像 - 图像在内部 div 中，或在输入中的可点击按钮中。
See here: Clickable icon inside input field
请参阅此处： 输入字段内的可点击图标
回答by mrak
You can not place any other element within an input element, see html-spec: http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4
您不能在输入元素中放置任何其他元素，请参阅 html-spec：http: //www.w3.org/TR/REC-html40/interact/forms.html#h-17.4
<!ELEMENT INPUT - O EMPTY -- form control -->
<!ELEMENT INPUT - O EMPTY -- form control -->
回答by Afzaal Ahmad Zeeshan
If you want to add the divinside the text field such as inputor textareathen try this:
如果您想div在文本字段内添加诸如input或textarea然后试试这个：
$("input#skills").val("<div style='background:green;'>"+skbl+"</div>");
This will update the whole field. You can try out this:
这将更新整个字段。你可以试试这个：
$("input#skills").append(new_val);
Note:
笔记：
You can use HTMLvalue in a input. But you will get other server side issues. So that's why I guess Colandus was asking you not to write it there, however his idea is good to. Because you won't get to know how to edit it, and the browser would mess up the UI!
您可以HTML在input. 但是您会遇到其他服务器端问题。所以这就是为什么我猜 Colandus 要求你不要在那里写它，但是他的想法是好的。因为你不会知道如何编辑它，浏览器会搞乱 UI！
