我是 Jquery 新手。我想在输入框更改时更改标签文本。我有一个带有名称的输入框email.
<input type="text" name="email" id="email" />
当输入框更改时，我想将标签文本设置为：将副本发送到我的邮箱：[电子邮件受保护] /cdn-cgi/l/email-protection
<label for="sendCopy">
<input id="sendCopy" type="checkbox" checked="" name="copy"></input>
Send copy to my mail
</label>
我有这个 Jquery 代码：
$(function () {
$("#email").keyup(function () {
var email = $("#email").val();
$("label[for='sendCopy']").val('Send copy to my mail: ' + email);
});
});
但当keyup功能被触发标签被更改为正确，但内部输入被删除。
<label for="sendCopy">
Send copy to my mail [email protected] /cdn-cgi/l/email-protection
</label>
我希望你理解我的问题。
您可以将标签的文本包装在span为了更容易选择：
$("#email").keyup(function() {
$('label[for="sendCopy"] span').text('Send copy to my mail: ' + $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="email" id="email" />
<label for="sendCopy">
<input id="sendCopy" type="checkbox" checked="" name="copy" />
<span>Send copy to my mail</span>
</label>
或者，您可以保持 HTML 不变，直接修改 textNode。
$("#email").keyup(function() {
var textNodes = $('label[for="sendCopy"]').contents().filter(function() {
return this.nodeType == 3;
});
textNodes[textNodes.length - 1].nodeValue = 'Send copy to my mail: ' + $(this).val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="email" />
<label for="sendCopy">
<input id="sendCopy" type="checkbox" checked="" name="copy" />
Send copy to my mail
</label>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
