如何在输入框值中更改<p>标记内容？
如何在输入框值中更改<p>标记内容？
提问于 2018-08-02 05:15:55
我有一个单词<p>，我希望将该段的内容更改为输入框的值。这真的很简单，但我对JavaScript和jQuery还不熟悉。这是要修改的段落。
<p class="editor-example" id="screen-name">Name</p>这是我用来获取和应用更改的表单和按钮
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>如果您想慢慢来，当输入框更改而不是按钮时，使段落自动更改将非常方便。谢谢！！
回答 5
Stack Overflow用户
回答已采纳
发布于 2018-08-02 05:21:37
将button放在表单中，并向其中添加一个事件侦听器。然后从输入中获取值并使用innerHTML替换p标记中的内容。
document.getElementById('apply').addEventListener('click', function() {
document.getElementById('screen-name').innerHTML = document.getElementById('nameID').value.trim()
})<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
<button id="apply" type="button">Apply</button>
</form>
Stack Overflow用户
发布于 2018-08-02 05:21:46
您需要为文本框编写keypress事件。
$("#text").keypress(function() {
$("#p").html($("#text").val());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p">p</p>
Please change the value of imput to change p: <input id="text"></input>
Stack Overflow用户
发布于 2018-08-02 05:22:16
正如你所说：
如果您想慢慢来，当输入框更改而不是按钮时，使段落自动更改将非常方便。谢谢！！
在Jquery中：
$(document).ready(function(){
$('#nameID').keyup(function(){
$('#screen-name').text($(this).val());
});
});在html中：
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51645953
复制相关文章
相似问题
腾讯云开发者
