JavaScript搜索框灰色提示字样式合集

搜索框的灰色提示字样式集合，真的是前端开发中的一个小巧又实用的资源。尤其在做表单或者顶部导航搜索功能时，那种点击前有提示、点击后清空的效果，是不是用得还挺频繁？这个资源就把各种搜索框样式做了个小合集，像是带图标的、自动消失提示字的、甚至还有带动画聚焦的，统统都整上了。

灰色提示字的，用的还是最基本的focus和blur事件，逻辑挺清晰，代码也不复杂。就比如这样：

input.onfocus = function() {
  if (this.value === '输入关键词') this.value = '';
}

你要是追求点交互美感，还能加个放大动画，配个transition，动效一下子就起来了。

样式方面，资源里有不少变体。圆角、边框色、背景渐变、搜索图标位置可调，连placeholder样式都能自定义，兼容性也还不错。是做响应式的场景下，搭配media query或者用点window.innerWidth判断，适配起来还是挺方便的。

还有实时搜索那块，通过input事件配合节流函数，一边输入一边过滤数据，体验真不错。配合个debounce函数就能轻松搞定：

function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  }
}

，如果你平时做表单或者搜索功能多，下载下来看看挺有的，省得每次都从头撸。