实时访问html输入html-element中的显示

Question

我有两个输入,一个应该包含firstname,另一个应该包含新用户的lastname.现在我想在a中实时显示用户名(firstname.lastname).但是当我编辑第二个输入时,整个文本就会发生变化.

这是我的代码:https://jsfiddle.net/qun74mwc/13/

HTML:

<span id="username"></span><br/><br/>
<input type="text" name="firstname" /><br/><br/>
<input type="text" name="lastname" />

jQuery的:

var $username = $("#username");

$("input[name='firstname']").keyup(function() {
   $("#username").text( this.value + ".");
});

$("input[name='lastname']").keyup(function() {
   $("#username").text( this.value );
});

Answer 1

当你这样做:

.text( this.value )

您可以使用当前输入的值替换其中的内容.而是将其替换为整个计算值.您只需要一个处理程序:spankeyup

$("input").keyup(function() {
    var formattedName = $("input[name='firstname']").val() + "." + $("input[name='lastname']").val();
    $("#username").text(formattedName);
});