使用Jquery .keyup填充输入值以显示全名

Question

我想从span中的名字和姓氏输入的值显示一个全名文本，尝试使用.keyup，但这只适用于名字。

码：

<input id="first_name" placeholder="First name"/>
<input id="last_name" placeholder="Last name"/>

<p>
  Full Name: <span id="fullname"></span>
</p>

<script>
    $( "#first_name" )
      .keyup(function() {
        var value = $("#first_name, #last_name").val();
        $( "#fullname" ).text( value );
      })
      .keyup();
</scrip>

如何在span中添加更改时的名字和姓氏输入值？

Answer 1

您需要在两个输入框上绑定keyup事件。另外，您没有将#last_name的值提取到单独的变量中。

以下是一个工作示例：

$("#first_name, #last_name")
  .keyup(function() {
    var firstName = $("#first_name").val();
    var lastName = $("#last_name").val();
    $("#fullname").text(firstName + ' ' + lastName);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="first_name" placeholder="First name" />
<input id="last_name" placeholder="Last name" />

<p>
  Full Name: <span id="fullname"></span>
</p>

Answer 2

分别获取两个输入的值，然后将它们与空格连接，并将其设置为跨度的html。

你应该在两个输入上攻击.keyup事件处理程序。否则输入姓氏输入不会改变span的文本。

$("#first_name, #last_name")
  .keyup(function() {
    var fname = $("#first_name").val();
    var lname = $("#last_name").val();
    $("#fullname").text(fname+" "+lname);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="first_name" placeholder="First name" />
<input id="last_name" placeholder="Last name" />

<p>
  Full Name: <span id="fullname"></span>
</p>