如何在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条答案
按热度按时间bxgwgixi1#
You can't place any element inside an input. An input does not contain any HTML.
Explanation
In HTML, an input element is a void element, which means it does not have a closing tag and cannot contain any other elements inside it. This is because an input element is used to input data, such as text or numbers, and not to hold other HTML elements.
Consider this:
The
<input>
tag does not (and cannot) close with</input>
, therefore it cannot contain any HTML. Neither does thevalue
-attribute allow any HTML inside of it, only plain text.wr98u20j2#
要做到这一点的方法是把输入和所需的div放在一个 Package 器div中, Package 器div应该看起来像输入-所需的宽度,输入的长度,并且应该有边框。里面的输入应该是inline-block,没有边框,宽度更小,而里面的div应该是inline-block,没有边框,宽度更大。填充外部div的剩余宽度。通过这种方式,您可以在输入中创建图像-图像位于内部div中,或者位于输入中的可单击按钮中。
请参阅此处:Clickable icon inside input field
7rfyedvj3#
您不能在input元素中放置任何其他元素,请参阅html-spec:http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4
<!ELEMENT INPUT - O EMPTY -- form control -->
4c8rllxm4#
如果您想在文本字段中添加
div
,如input
或textarea
,请尝试以下操作:这将更新整个字段。您可以尝试以下操作:
你可以在
input
中使用HTML
值。但是你会得到其他服务器端的问题。所以我猜这就是为什么Colandus要求你不要在那里写它,但是他的想法是好的。因为你不会知道如何编辑它,浏览器会搞砸UI!