vue 中调用移动端软键盘“搜索”按键

将input元素的type值替换成“search”,在移动端会唤出“搜索”按键。需注意的是,对于苹果手机input元素必须要有一个form标签套起来,否则键盘上的文字不能变成搜索字样

@keyup.13 事件, 这是用来绑定enter键的事件。在电脑上是enter键,在手机键盘上就是右下角的完成 / 搜索按钮了。

<template>
  <div class="search_page">
    <form class="search_box" action="javascript:return true;">
      <div class="search_input">
        <i class="bp-icon bpIcon-search"></i>
        <input type="search" placeholder="请输入课程名称" v-model="searchTxt" @keyup.13="toSearchEdu"/>
        <div class="clear_input" v-show="toggleBtn" @click="searchTxt = ''"><img src="../../assets/img/clearInput.png" alt=""></div>
      </div>
      <button @click="subSearch">取消</button>
    </form>
  </div>
</template>
    toSearchEdu(logs){
        console.log(logs)
    },

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CKEditor 是一个功能强大的富文本编辑器,可以在 Vue 使用。关于移动的支持,CKEditor 5 提供了适用于移动设备的“Classic”编辑器构建版本,但需要注意一些限制和适配问题。 在 Vue 使用 CKEditor 5 可以通过以下步骤进行设置: 1. 安装 CKEditor 5 的 Vue 组件: ```bash npm install @ckeditor/ckeditor5-vue ``` 2. 在 Vue 组件引入 CKEditor 组件: ```vue <template> <ckeditor :editor="editor" v-model="content" /> </template> <script> import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; import CKEditor from '@ckeditor/ckeditor5-vue'; export default { components: { ckeditor: CKEditor.component, }, data() { return { editor: ClassicEditor, content: '', }; }, }; </script> ``` 3. 根据你的需求配置和定制编辑器的选项,例如工具栏、插件等。 关于移动支持的问题,CKEditor 5 在移动设备上的体验可能会有一些限制。由于移动设备的屏幕尺寸较小,可能会出现一些布局和用户体验上的问题。CKEditor 5 Classic 编辑器在移动设备上可能不如在桌面设备上使用时那样流畅和易用。 为了更好地在移动设备上支持富文本编辑,你可以考虑以下方案: - 使用 CKEditor 4: CKEditor 4 有更好的移动设备支持,但它与 Vue 的集成可能需要一些额外的配置和插件。 - 寻找其他移动设备友好的富文本编辑器: 有一些专门针对移动设备的富文本编辑器,可以更好地适应移动设备的屏幕尺寸和交互方式。 总之,虽然 CKEditor 5 可以在移动设备上使用,但需要考虑到一些限制和适配问题。根据你的具体需求,你可以选择适合移动的富文本编辑器或根据 CKEditor 5 的移动设备支持情况进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值