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

基本上你的逻辑是正确的，但你需要检查输入是否实际填充。

我将如何做到这一点：

$("#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

Answer 2

您可以通过始终在第三个文本框中设置连接值来执行此操作，如下所示：

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

这样做的好处是需要少一个事件处理程序，尽管第一次从＃34;＃name＆＃34;它将无用地查询＆＃34; #sname＆＃34;的值，但这可能是一个相当微不足道的开销。

编译多个字段后，Jquery模糊

2 个答案: