JQuery размытие после нескольких полей, скомпилированных

Question

Я хотел бы сгенерировать текст «на лету», взяв данные из двух полей ввода после их компиляции. Я думал о размытии функции, но хотел бы сгенерировать текст только тогда, когда оба поля ввода имеют значение. В то время я делал только одно поле за один раз, но один перезаписывал другой.

<p><input type="text" name="name" id="name" /></p> 
<p><input type="text" name="sname" id="sname" /></p> 
<p><input type="text" name="text" id="text" /></p> 

JS

$("#name").blur(function(){ 

    var str = $("#name").val(); 
    var n = str.substring(0, 1); 
    $('#text').val(n); 
}); 

$("#sname").blur(function(){ 

    var str = $("#sname").val(); 
    var s = str.replace(/[_\W]+/g, "") 
    $('#text').val(s); 
}); 

http://jsfiddle.net/f58fn/

Как я могу это сделать? спасибо

Answer 1

Вы можете сделать это, всегда устанавливая каскадное значение в вашем третьем текстовом поле следующим образом:

<p><input type="text" name="name" class="input" id="name" /></p> 
<p><input type="text" name="sname" class="input" id="sname" /></p> 
<p><input type="text" name="text" id="text" /></p> 

$('.input').blur(function(){ 
    var value = $("#sname").val() + $("#name").val() 
    $("#text").val(value); 
}); 

Это имеет преимущество, нуждаясь один меньше обработчика событий, хотя в первый раз, когда вы Bler от «#NAME «он будет бесполезно запрашивать значение« #sname », но это будет довольно незначительным накладным расходами.

Answer 2

В принципе, ваша логика правильная, но вам нужна проверка, действительно ли введенные данные заполнены.

Вот как я хотел бы сделать это:.!

$("#name, #sname").bind('input', function() { 
    //May you want to show the user that only certain chars are allowed 
    var n = $("#name").val($("#name").val().substring(0, 1)).val(); 
    var s = $("#sname").val($("#sname").val().replace(/[_\W]+/g, "")).val(); 
    //check if the input fulfills your needings (may inlcude a check for space, etc.) 
    if ($("#sname").val().length && $("#name").val().length) { 
     $('#text').val(n + s); 
    } 
}); 

Demo