如何更改输入框值中的 <p> 标签内容？答案

【问题标题】：How to change <p> tag content in input box value?如何更改输入框值中的 <p> 标签内容？
【发布时间】：2018-08-02 14:59:52
【问题描述】：

我有一个单词<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>

如果您想慢慢来，让段落在输入框更改而不是按钮时自动更改会很方便。谢谢！！

【问题讨论】：

您应该先尝试自己编码，而不是要求编码。提示：$('#nameID').on('change', function() { ... });
Change paragraph text dynamically with jQuery?的可能重复

标签： javascript jquery html input

【解决方案1】：

将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>

【讨论】：

【解决方案2】：

你需要为文本框编写按键事件

$("#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>

【讨论】：

【解决方案3】：

你可以这样做：

$(document).ready(function(){
   $("#nameID").keyup(function(){  
   var name = $("#nameID").val();
   $("#screen-name").text(name);
    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

【讨论】：

【解决方案4】：

如你所说：

如果您想慢慢来，让段落在输入框更改而不是按钮时自动更改会很方便。谢谢！！

在 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>

【讨论】：

【解决方案5】：

$("#apply").click(function() {
   $("#paragraph").text($("#nameID").val());
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<p id="paragraph">This Text changes from the form below</p>
<form>                    
  <input id="nameID" type="text" >
  <button id="apply" type="button">Apply</button>
</form>

【讨论】：