Question

我有以下代码从用户电子邮件中自动填充用户名。

  $("#useremail").keyup(function () {
    $('#username').val($('#useremail').val()).change();
  });

并且，例如，如果用户开始键入useremail“klajdkljsd@gmail.com”

用户名应仅输入“klajdkljsd@gmail.com”

但是，如何阻止在@符号后输入的文本？所以用户名只填充到“klajdkljsd”？

由于

Answer 1

试试这个：

$('#useremail').on('keyup', function () {
    var user_email = $(this).val().split('@');  // Splits the user_email at the @ char
    var user_name = user_email[0];  // Gets the first key in the array of the splitted items
    $('#username').val(user_name); // Sets the value of #username to user_name
});

或者像这样 - 同样的事情，但代码更少：

$('#useremail').on('keyup', function () {
    $('#username').val($(this).val().split('@')[0]);
});

Answer 2

我会使用模式属性和一些JS修改。查看演示：http://codepen.io/zvona/pen/LEWZOW

HTML：

<p>Username: <input type="text" id="username" pattern="[a-z0-9.]*" /></p>
<p>E-mail: <input type="email" id="email" /></p>

JS：

document.querySelector("#email").addEventListener("keyup", function() {
  var username = document.querySelector("#username");
  var pattern = new RegExp(username.getAttribute("pattern"), "gi");

  username.value = pattern.exec(this.value);
}, false);

在键入特殊字符之前在Keyup上使用jQuery

2 个答案: