React&Js实现无刷新搜索后隐藏键盘[兼容IOS&Android]

最新推荐文章于 2023-05-18 14:18:12 发布

原创最新推荐文章于 2023-05-18 14:18:12 发布 · 498 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#乔乐共享 #众观千象 #每天进步一点点 #学习永无止境 #React

js 同时被 2 个专栏收录

123 篇文章

订阅专栏

React

32 篇文章

订阅专栏

本文介绍了一个使用React实现的搜索框组件。该组件包括一个输入框和一个搜索按钮，支持通过键盘回车或点击按钮触发搜索行为。文章还提供了具体的React HTML代码及相应的搜索功能实现逻辑，并展示了如何设置CSS样式来美化搜索框。

搜索框效果：

React Html：

<form onSubmit={e => this.searchItem(keyword, e)}>
  <img src="./images/icons/search-icon.png" className="search-icon" />
  <input type="search" autoFocus={!searchResult.scrollTop} value={keyword} onChange={e => this.setKeyword(e.target.value)} placeholder="搜索商城商品" onFocus={keyword?null:()=>this.switchTips(true)} />
  <span onClick={() => this.searchItem(keyword)}>搜索</span>
</form>

// or

<form onSubmit={e => this.searchItem(keyword, e)}>
  <img src="./images/icons/search-icon.png" className="search-icon" />
  <input type="search" autoFocus={!searchResult.scrollTop} value={keyword} onChange={e => this.setKeyword(e.target.value)} placeholder="搜索商城商品" onFocus={keyword?null:()=>this.switchTips(true)} />
  <input type="submit" value="搜索" />
</form>

Search Function：

searchItem(keyword, e) {
  if (e) e.preventDefault();
  keyword = keyword.trim();
  document.activeElement.blur(); // 很关键的一部，失去焦点，兼容IOS
  if (keyword) {
    SearchActions.byKeyword(keyword);
  }
}

Css Style：

.search-bar
  padding: .5em 1em;
  background: $bgColor;

  .search-icon
    position: absolute;
    margin-left: 10px;
    margin-top: 7px;
    width: 1.4em;

  input
    height: 30px;
    width: 73%;
    outline: none;
    border-radius: 15px;
    border $borderStyle
    padding-left: 2.6em;
    margin-right: 10px;

/* Or */
.search-bar
  padding: .5em 1em;
  background: $bgColor;

  .search-icon
    position: absolute;
    margin-left: 10px;
    margin-top: 7px;
    width: 1.4em;

  input[type=search]
    height: 30px;
    width: 73%;
    outline: none;
    border-radius: 15px;
    border $borderStyle
    padding-left: 2.6em;
    margin-right: 10px;

  input[type=submit]
    background none
    border: none;
    outline none