手提式有线电电话机软键盘搜索开关,ui的search组件怎么样在键盘呈现寻找开关

<form action="" target="frameFile">
  <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)">
    <div v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <ListItem :lists="lists"></ListItem>
      <div class="loading-text" v-if="(loadingTextBtn==true)"><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div>
    </div>
  </mt-search>
  <iframe name='frameFile' style="display: none;"></iframe>
</form>
<form action="" target="frameFile">
  <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)">
    <div v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <ListItem :lists="lists"></ListItem>
      <div class="loading-text" v-if="(loadingTextBtn==true)"><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div>
    </div>
  </mt-search>
  <iframe name='frameFile' style="display: none;"></iframe>
</form>

代码如下所示:

采纳input将手提式有线电话机软键盘出现寻觅按键

解决办法:

消除办法:

<form action="" target="frameFile">
 <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)">
 <div v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
  <ListItem :lists="lists"></ListItem>
  <div class="loading-text" v-if="(loadingTextBtn==true)"><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div>
 </div>
 </mt-search>
 <iframe name='frameFile' style="display: none;"></iframe>
</form>
<div className=‘box’>
<div className="query-input-model">
    <form action='' target="rfFrame">
          <input    type="search"  onKeyDown={this.queryKeyDownHandler.bind(this)} />
    </form>
</div>
<iframe id="rfFrame" name="rfFrame" src={{about:"blank"}} style={{display:"none"}}>   </iframe>
</div>

mint-ui的search组件input暗许也是type=”search”类型的,可是还亟需在外层包一组form标签,并且带有action,就会在键盘中出现搜索开关。

mint-ui的search组件input暗中认可也是type=”search”类型的,不过还必要在外层包壹组form标签,并且包蕴action,就会在键盘中冒出搜索开关。

化解办法:

注意事项:
1)input中的type是search
二)input必须包裹在form中本领有成效
三)如果想要寻觅的时候不刷新页面需求在form中action设置为空,target设置为本页面中的iframe
手提式有线电电话机软键盘搜索开关,ui的search组件怎么样在键盘呈现寻找开关。效果:
一)手提式有线电话机软键盘突显搜索开关

如上是办法1:

如上是艺术一:

mint-ui的search组件input暗中认可也是type=”search”类型的,但是还须要在外层包一组form标签,并且包蕴action,就会在键盘中冒出搜索开关。

澳门葡京 1

在三哥伦比亚大学键盘点击寻觅的时候,页面会刷新,所以给form加二个target,target规定在何处打开action
ULANDL,再放入3个掩蔽的iframe,起名称为form的target的值,那样则在当下页面体现出寻觅的剧情

在手提式有线电话机键盘点击寻找的时候,页面会刷新,所以给form加多个target,target规定在何地打开action
U锐界L,再放入二个潜藏的iframe,起名称为form的target的值,那样则在当下页面呈现出寻找的剧情

如上是格局1:

1.png

如下是办法二:

正如是艺术二:

在大哥大键盘点击寻找的时候,页面会刷新,所以给form加一个target,target规定在哪儿张开action
U瑞虎L,再放入3个藏身的iframe,起名叫form的target的值,那样则在当下页面呈现出搜索的剧情

二)点击找寻不会爆发刷新页面,并滞留在本页面

<form action="" v-on:submit.prevent=""

> <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)"> <div v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10"> <ListItem :lists="lists"></ListItem> <div class="loading-text" v-if="(loadingTextBtn==true)"><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div> </div> </mt-search> </form>
<form action="" v-on:submit.prevent=""

> <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)"> <div v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10"> <ListItem :lists="lists"></ListItem> <div class="loading-text" v-if="(loadingTextBtn==true)"><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div> </div> </mt-search> </form>

一般而言是措施2:

此处一贯给onsubmit事件写入return false,

此地直接给onsubmit事件写入return false,

<form action="" onsubmit="return false;">
  <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)">
   <div v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
   <ListItem :lists="lists"></ListItem>
   <div class="loading-text" v-if="(loadingTextBtn==true)"><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div>
   </div>
  </mt-search>
</form>
 onsubmit="return false;"
 onsubmit="return false;"

那里一直给onsubmit事件写入return
false,禁止提交,则寻觅列表页也得以在当前页面呈现。

明确命令禁止提交,不过由于是vue所以使用vue自带的submit阻止刷新事件,则寻觅列表页也能够在现阶段页面突显。

明确命令禁止提交,不过出于是vue所以使用vue自带的submit阻止刷新事件,则搜索列表页也足以在脚下页面展现。

总结

 

 

以上所述是小编给大家介绍的mint-ui的search组件在键盘展现找寻按键的贯彻格局,希望对大家持有帮忙,假使我们有任何疑问请给作者留言,笔者会及时复苏咱们的。在此也万分多谢大家对台本之家网址的支撑!

在search方法中,加叁个点击搜索按钮后软键盘收起的风浪:

在search方法中,加1个点击寻觅开关后软键盘收起的轩然大波:

你或者感兴趣的稿子:

  • Vue.js
    的移位端组件库mint-ui达成Infiniti滚动加载更多的秘技
  • 浅谈mint-ui
    loadmore组件注意的标题
  • 详解vue
    mint-ui源码解析之loadmore组件
  • Mint-UI时间组件开头时间难题及时间插件使用
document.activeElement.blur();
document.activeElement.blur();

 

 

参照作品:

澳门葡京 ,参考小说:

 

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website