清除另一个文本输入字段后清除

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' />