Question

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

如果要花些时间，在输入框更改而不是按钮更改时使段落自动更改很方便。谢谢！

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

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

Answer 3

如您所说：

如果要花些时间，在输入框更改而不是按钮更改时使段落自动更改很方便。谢谢！

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

Answer 4

您可以这样做：

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

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

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

5 个答案: