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

搜索框效果：

 

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