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

【问题标题】：Clearing a text input field after clearing another one清除另一个文本输入字段后清除另一个文本输入字段
【发布时间】：2016-10-01 02:53:02
【问题描述】：

我有 2 个文本 <input>s。我希望通过删除 textbox2 的文本或单击文本框左侧的“X”按钮来清除 textbox2 后清除 textbox1。有没有办法检测文本框的清除或向“X”按钮添加事件？

【问题讨论】：

标签： javascript textbox

【解决方案1】：

您可以在 textbox1 上使用 keyup 事件来了解文本框何时为空

$('#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' />

【讨论】：

【解决方案2】：

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

【讨论】：