Question

现在代码只能用于填充另一个输入字段。但我需要它来填充常规段落而不是另一个输入字段。我该怎么办？

$(".first").on('keydown',function(){
  $(".second").val($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the reuslt">

Answer 1

使用text功能将文本插入元素中。

id's和classes可用于指定特定元素（id）或组元素（ class）。在下面的示例中，我添加了一个类，使用css更改为每个<p>标记的颜色为红色。在我们的JS中，我们在个人ID上选择。

//selecting on the insertTextHere id to specify the <p> tag to insert text into
$("#first").on('keyup', function() {
  $("#insertTextHere").text($(this).val());
});

//you can even set it up to revert back to the original text on click
$("#resetButton").on("click", function() {
  var resetText = "Type into input to overwrite this text";
  //insert original string as text
  $("#insertTextHere").text(resetText);
  //empty the input value
  $("#first").val("");
});

.text {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="first" placeholder="type here">
<button id="resetButton" type="button">reset text</button>
<div>
  <p id="insertTextHere" class="text">Type into input to overwrite this text</p>
  <p class="text">This text will not be overwritten</p>
</div>

Answer 2

表单字段在JQuery中具有value属性（val()方法）。常规元素具有textContent属性（或在JQuery中，text()方法）。

此外，您应该使用keyup来获取所有输入的文字。

＆＃13;

$(".first").on('keyup',function(){
    $("#output").text($(this).val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="first" placeholder="type here">
<p id="output"></p>

＆＃13;

Answer 3

您应该使用＆＃39; 输入＆＃39;事件而不是 keydown / keyup - 如果用户粘贴值它们都不起作用。所以请改用它：

＆＃13;

$('.inputClass').on('input', function() {
    $('.paragraphClass').text($(this).val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inputClass">
<p class="paragraphClass"></p>

＆＃13;

Answer 4

$(".first").on('keydown',function(){
    $('.selectorOfDOM').text($(this).val());
}

您可以在此链接中找到类似的问题。 Fill div with text

使用基于JavaScript输入的文本填充HTML元素

4 个答案: