如何移除<input>的placeholder‘search’并实现输入框失焦清空功能？

1. 移除占位文本 #

直接删除<input>标签中的placeholder="search"属性即可，修改后的代码：

<input class="search-bar">

2. 实现失焦时清空输入内容 #

通过监听输入框的blur（失焦）事件来清空内容，有两种实现方式：

方式一：内联事件（快速实现） #

直接在<input>标签中添加onblur事件：

<input class="search-bar" onblur="this.value = ''">

方式二：外部JavaScript脚本（更易维护） #

如果需要分离HTML和逻辑，可通过DOM操作绑定事件：

// 获取搜索栏元素
const searchBar = document.querySelector('.search-bar');
// 绑定失焦事件
searchBar.addEventListener('blur', function() {
  this.value = '';
});

完整代码示例（结合两个需求） #

内联版本：

<input class="search-bar" onblur="this.value = ''">

外部脚本版本：

<input class="search-bar">

<script>
const searchBar = document.querySelector('.search-bar');
searchBar.addEventListener('blur', function() {
  this.value = '';
});
</script>

内容的提问来源于stack exchange，提问作者TheToy