gpt4 book ai didi

javascript - 使用 jQuery 将 HTML 附加到表单字段

转载 作者:行者123 更新时间:2023-11-28 11:16:25 25 4
gpt4 key购买 nike

假设我有一个表单字段,我想向其附加一个span标签。可以用 jQuery 做到这一点吗?

我尝试了这段代码:

$("input").append("<span>My HTML to append</span>");

或者我必须使用其他东西来附加 HTML。

所以它会是这样的:

<input><span>My HTML to append</span></input>

但这行不通。

就像当您向 StackOverflow 上的问题添加标签时,每个标签都是一个 block 。

编辑:StackOverflow 在向问题添加标签时是如何做到的。

最佳答案

input elements 不能有任何子元素,因此不能使用 append在他们身上。

您可以使用 jQuery 的 val 设置它们的值方法。

如果您将该值设置为 <span>My HTML to append</span>,它们在任何情况下都不会渲染 HTML ,这正是您将在输入中看到的内容。

<小时/>

重新编辑:

So it would be something like this:

<input><span>My HTML to append</span></input>

这是无效的 HTML。再次 input elements不能有内容,它们是 "void" elements 。这就是为什么你不能使用 append在他们身上。

<小时/>

在下面回复您的评论:

How did StackOverflow do it when adding tags to the question.

他们没有。相反,有一个输入,当您完成输入中的标签时,他们会将其删除并将其放在输入前面的跨度中,因此您最终会得到:

<span>
<span class="post-tag">tag</span>
<span class="post-tag">another-tag</span>
</span>
<input type="text">

在任何现代浏览器中,右键单击标签输入字段并选择“检查元素”即可实时查看。

这是一个非常快速而简单的示例(但是有很多插件可以实现这一点 - tagitselect2 [我的一个客户使用了其中一个,爱],...):Live Copy

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>Tags-Like Input</title>
<style>
.input-wrapper {
border: 1px solid #aaa;
}
.post-tag {
border: 1px solid #00a;
margin-right: 2px;
}
</style>
</head>
<body>
<div class="input-wrapper">
<input type="text" id="theInput">
</div>
<script>
(function() {
$("#theInput").on("keypress", function(e) {
if (e.which === 32) {
e.preventDefault();
addTag($.trim(this.value));
this.value = "";
}
});
function addTag(tag) {
$('<span class="post-tag"></span>')
.text(tag)
.insertBefore("#theInput");
}
})();
</script>
</body>
</html>

关于javascript - 使用 jQuery 将 HTML 附加到表单字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23424274/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com