javascript - 如何使用 jQuery 或 javascript 自动创建结合两个字段的用户名？

Question

我编写了以下代码:

var fname = "";
var lname = "";
var username = "";

$('#new-user-form input[name=fname]').on('keyup', function() {
    var fname = $('#new-user-form input[name=fname]').val().substring(0,1).toLowerCase();
    var username = fname + lname;
    $('#new-user-form input[name=username]').val(username);
});
$('#new-user-form input[name=lname]').on('keyup', function() {
    var lname = $('#new-user-form input[name=lname]').val().toLowerCase();
    var username = fname + lname;
    $('#new-user-form input[name=username]').val(username);
});

我想要的是用户名字段自动填充名字的第一个字母和所有姓氏。它有点有效，但对于每个领域都是单独的。如果我在 fname 字段中输入 Mario，则字母 m 会出现在用户名字段中，但一旦我开始在 lname 字段中输入，用户名字段就会被清除，只显示小写的姓氏。我错过了什么？

提前致谢!

Answer 1

您基本上覆盖了用户名。当您编辑其中任何一个时，您必须读取名字和姓氏。您可以创建一个函数并将其作为回调传递。

function createUsername()  {
 var fname = $('#new-user-form input[name=fname]').val().substring(0,1).toLowerCase();

var lname = $('#new-user-form input[name=lname]').val().toLowerCase();
  var username = fname + lname;
 $('#new-user-form input[name=username]').val(username);
}

$('#new-user-form input[name=fname]').on('keyup', createUsername);
$('#new-user-form input[name=lname]').on('keyup', createUsername);

Link to a working JSFiddle