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

阅读更多

搜索框效果：

 

React Html：

 this.searchItem(keyword, e)}>
  
   this.setKeyword(e.target.value)} placeholder="搜索商城商品" onFocus={keyword?null:()=>this.switchTips(true)} />
   this.searchItem(keyword)}>搜索


// or

 this.searchItem(keyword, e)}>
  
   this.setKeyword(e.target.value)} placeholder="搜索商城商品" onFocus={keyword?null:()=>this.switchTips(true)} />
  

 

 

 

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

 

• 
• 大小: 19.5 KB

• 查看图片附件