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

搜索框效果:

React&Js实现无刷新搜索后隐藏键盘[兼容IOS&Android]_第1张图片

 

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

 

你可能感兴趣的:(js,React)