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

wlsrxk51  于 2022-12-09  发布在  其他
关注(0)|答案(4)|浏览(146)

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

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:

<input type="text" placeholder="Enter your name">

The <input> tag does not (and cannot) close with </input> , therefore it cannot contain any HTML. Neither does the value -attribute allow any HTML inside of it, only plain text.

wr98u20j

wr98u20j2#

要做到这一点的方法是把输入和所需的div放在一个 Package 器div中, Package 器div应该看起来像输入-所需的宽度,输入的长度,并且应该有边框。里面的输入应该是inline-block,没有边框,宽度更小,而里面的div应该是inline-block,没有边框,宽度更大。填充外部div的剩余宽度。通过这种方式,您可以在输入中创建图像-图像位于内部div中,或者位于输入中的可单击按钮中。
请参阅此处:Clickable icon inside input field

7rfyedvj

7rfyedvj3#

您不能在input元素中放置任何其他元素,请参阅html-spec:http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4
<!ELEMENT INPUT - O EMPTY -- form control -->

4c8rllxm

4c8rllxm4#

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

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

这将更新整个字段。您可以尝试以下操作:

$("input#skills").append(new_val);
    • 备注:**

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

相关问题