清除另一個文本輸入字段後清除

Question

我有2個文本<input> s。我想通過刪除textbox2的文本或單擊文本框左側的「X」按鈕清除textbox2後清除textbox1。有沒有辦法檢測清除文本框或將事件添加到「X」按鈕？

Answer 1

HTML：

<input type="text" id="txtbox1"> 
<input type="text" id="txtbox2"> 
<button id="btnX">X</button> 

JS：

document.getElementById("txtbox2").addEventListener("keyup", handler); 
document.getElementById("btnX").addEventListener("click", handler); 

function handler() { 
    txt1 = document.getElementById("txtbox1") 
    txt2 = document.getElementById("txtbox2") 
    if(txt2.value == ""){ 
     txt1.value = "" 
    } 
} 

Demo

Answer 2

可以使用keyup事件在TextBox1中的知道什麼時候文本框爲空

$('#txt1').on('keyup', function() { 
 
    if ($('#txt1').val().trim().length == 0) { 
 
    $('#txt2').val(''); 
 
    } 
 
}); 
 
$('.deleteText').click(function() { 
 
    $('#txt1').val(''); 
 
    $('#txt2').val(''); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" id="txt1" value='delete it' /><span class='deleteText'>X</span> 
 
<br/> 
 
<input type="text" id="txt2" value='test value' />