从一个输入动态生成值到另一个输入

问题描述：

我想使用jQuery将我的一个输入标记动态复制到另一个输入标记。换句话说，当用户在第一个输入中输入时，第二个输入显示用户正在输入什么内容（只有当复选框被选中时）。从一个输入动态生成值到另一个输入

第二输入应该只出现在第一输入端输入了什么东西，并选中该复选框

链接到小提琴： https://plnkr.co/edit/GI8jWqh6PbMKO7HVhikP?p=preview

这是我到目前为止有：

<body> 
    <input type="password" id="firstInput" /> 
    <input type="hidden" id="secondInput" /> 
    <br/> 
    <input type="checkbox" id='checkbox'/> 

<script> 
    $('#checkbox').change(function(){ 
    if ($(this).prop('checked')) { 
     $(secondInput).prop('type', 'text'); 
     $(firstInput).on('input', function() { 
      $(secondInput).val($(firstInput).val()); 
     }); 
    } else { 
     $(secondInput).prop('type', 'hidden'); 
    } 

    }); 
</script>

这方面的工作，howeve r，我面临以下问题：

1.如果默认复选框为“checked”，jQuery将不会看到更改事件，所以如果我开始键入，第二个输入将不会显示任何内容。

2.当我开始打字时，第二个输入显示出来。如果我删除firstInput中的所有内容，secondInput将不会隐藏。

3.与第2个问题类似的问题。如果我将复选框checked属性默认为false，如果我将其更改为checked，隐藏的输入显示出来，即使我没有输入任何内容。

4.如果我不勾选复选框，然后开始输入内容，如果我将复选框更改为选中状态，第二个输入将不会显示我输入的内容，因为之后发生change（）事件。

建议？

因此，如果用户输入第一个输入，第二个输入应该自动显示？或者，第二个输入应该只在第一个输入中输入内容时显示*并且*框被选中了？你已经说明了你的'问题'，但是你没有清楚地解释你想要创建的行为。 –

@DavidThomas它应该是“第二个输入应该只显示，当输入的东西在第一个输入和框被检查”。我会更新我的帖子。 – OPK

答

我认为这符合你想要的。

它只是使用一个事件处理程序，这两个复选框和主输入

var $check = $('#4').change(updateSlave), 
     $slave = $('#secondInput'), 
     $master = $('#firstInput').on('input', updateSlave); 


    function updateSlave(){ 
    var showSlave = $master.val() && $check.is(':checked'); 
    // not sure about value when hidden 
    $slave.prop('type', showSlave ? 'text' : 'hidden').val(showSlave ? $master.val() : '') 

    }

DEMO

关于'＃secondInput''.value'是否应该设置为空字符串的好处，或者不是;对于这个问题，问题不完全清楚吗？虽然第4点似乎表明文本应该保留？ – guest271314

@ guest271314点4看起来很丑。我没有注意到那个。不太清楚如果用户在检查复选框后再次开始输入，会发生什么情况 – charlietfl

答

您可以使用事件委托，.toggleClass()

var first = $("#firstInput"), second = $("#secondInput"); 

$(document).on("input", "#firstInput.checked", function() { 
    second.val(this.value); 
}); 

$("#4").change(function() { 
    var checked = this.checked; 
    first.toggleClass("checked", checked); 
    second.prop("type", checked ? "text" : "hidden"); 
});

plnkr https://plnkr.co/edit/KXK5J5IU8bqTZhhqLHIu?p=preview

从一个输入动态生成值到另一个输入

相关推荐