有没有办法在编辑时只激活搜索栏上的取消按钮？

<input type="text" id="searchBar" placeholder="搜索">
<button id="cancelButton" disabled>取消</button>

#searchBar {
  width: 200px;
  height: 30px;
}

#cancelButton {
  margin-left: 10px;
  height: 30px;
}

const searchBar = document.getElementById('searchBar');
const cancelButton = document.getElementById('cancelButton');

searchBar.addEventListener('input', function() {
  if (searchBar.value.trim() !== '') {
    cancelButton.disabled = false;
  } else {
    cancelButton.disabled = true;
  }
});

cancelButton.addEventListener('click', function() {
  searchBar.value = '';
  cancelButton.disabled = true;
});