從一個輸入動態生成值到另一個輸入

我想使用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（）事件。

建議？

來源

2016-07-04 OPK

因此，如果用戶輸入第一個輸入，第二個輸入應該自動顯示？或者，第二個輸入應該只在第一個輸入中輸入內容時顯示*並且*框被選中了？你已經說明了你的'問題'，但是你沒有清楚地解釋你想要創建的行爲。 –

@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

來源

2016-07-05 00:18:48 charlietfl

關於'＃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

來源

2016-07-05 00:19:51 guest271314

從一個輸入動態生成值到另一個輸入

回答

相關問題