如何給input的右上角加個清除的按鈕？

王铁柱6發表於2024-12-11

在前端開發中，給 input 的右上角新增一個清除按鈕，可以透過幾種方法實現：

1. 使用背景圖片:

這是最簡單的方法，尤其適用於只需要清除圖示，不需要額外邏輯的情況。

<input type="text" style="background-image: url('clear.png'); background-repeat: no-repeat; background-position: right center; padding-right: 20px;">

你需要替換 clear.png 為實際的清除圖示路徑。padding-right: 20px; 避免輸入的文字被圖示遮擋。 點選圖示本身並不會清除內容，你需要配合 JavaScript 來實現清除功能。

2. 使用偽元素 ::after 或 ::before:

這種方法更靈活，可以自定義樣式，並透過 CSS 控制圖示的顯示和隱藏。

<input type="text" class="clearable">

<style>
.clearable {
  position: relative;
  padding-right: 20px;
}

.clearable::after {
  content: '×'; /* 你可以使用其他字元或圖片 */
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  cursor: pointer;
}

.clearable:focus::after {
  display: block; /* 只在輸入框獲得焦點時顯示 */
}
</style>

<script>
  const clearableInputs = document.querySelectorAll('.clearable');
  clearableInputs.forEach(input => {
    input.addEventListener('click', (event) => {
      if (event.target === input.nextElementSibling) { // 檢查點選的是否是清除按鈕
        input.value = '';
      }
    });
  });
</script>

這個例子中，我們使用 × 作為清除按鈕，並只在 input 獲得焦點時顯示。 你可以根據需要修改樣式和邏輯。 注意，這裡使用了 JavaScript 來監聽點選事件並清除內容。

3. 使用包含容器和獨立的清除按鈕:

這種方法結構更清晰，更易於控制，也更適合複雜的場景。

<div class="input-wrapper">
  <input type="text">
  <button class="clear-button">×</button>
</div>

<style>
.input-wrapper {
  position: relative;
  display: inline-block;
}

.clear-button {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  cursor: pointer;
  border: none;
  background: transparent;
}
</style>

<script>
  const clearButtons = document.querySelectorAll('.clear-button');
  clearButtons.forEach(button => {
    button.addEventListener('click', () => {
      button.previousElementSibling.value = '';
    });
  });
</script>

在這個例子中，我們將 input 和 button 包裹在一個 div 中，並使用 CSS 定位 button。 JavaScript 程式碼監聽 button 的點選事件並清除 input 的值。

選擇哪種方法取決於你的具體需求:

  • 簡單的清除功能，使用背景圖片就足夠了。
  • 需要更靈活的樣式和控制，可以使用偽元素。
  • 複雜的場景或需要更清晰的結構，可以使用包含容器和獨立的清除按鈕。

記住以上程式碼只是示例，你需要根據實際情況調整樣式和 JavaScript 程式碼。 例如，你可以新增 hover 效果、更改圖示、處理不同的事件等等。 你也可以使用一些前端框架，例如 React, Vue, Angular 等，它們通常提供更便捷的元件和工具來實現這個功能。

相關文章