jQuery on Keyup до ввода специального символа

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);