vue 项目软键盘回车触发搜索事件

目的：掉起来右下角为搜索的按钮

步骤：

1、input的type改为search，再写keydown按下时的事件调取搜索事件的方法

这样安卓手机上回车就变成了“搜索”，不过ios仍然是换行

2、input 外面套form，必须要有action，action=“javascript:return true”

我的项目用van：想弹出数字键盘，并监听搜索（换行），在安卓上执行搜索按钮，在ios 执行blur，因为安卓上点完成不执行blur

<form @submit.prevent="formSubmit" action="javascript:return true">
    <van-field
     v-model='deviceCode'
     type='tel'
     placeholder="输入设备唯一码"
     clearable
     @blur="blur"
     @keydown="search($event)"
    />
</form>
formSubmit () {
 return false
}

补充知识：在ios中，input唤出软键盘中‘换行'转‘搜索'、‘前往'，及直接唤醒数字键盘的实现（vue）

如下所示：

<input type="text" />

或

<form>
      <input type="text" placeholder="输入">
</form>

软键盘显示的都是

想要实现如图‘换行'变‘前往'：

代码如下：

<form action="javascript:return true">
    <input type="text" placeholder="请输入">
</form>

想要实现如图‘换行'变‘搜索'：

<form action="javascript:return true">
      <input type="search" placeholder="请输入姓名">
</form>

重点：

1：放在form标签内。

2：在form标签内加上action=”javascript:return true”

直接唤醒数字键盘

直接唤醒数字九键的键盘：

<input type="text" pattern="[0-9]*" placeholder="请输入数字1">

这时候如果如下代码把input标签放到表单标签内,则直接显示26键带有标点符号的数字键盘：

<form action="javascript:return true">
      <input type="number" placeholder="请输入数字2">  <!--显示26键数字键盘，带有标点符号-->
</form>

以上这篇vue 项目软键盘回车触发搜索事件就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue elementui 实现搜索栏公共组件封装的实例代码

    vue elementui 实现搜索栏公共组件封装的实例代码

    1.背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每个人写的样式都不相同,布局样式无法统一. 所以要考虑对搜索栏做一个封装,统一配置引用,提升开发维护效率和界面统一. 完成后的效果大概就是长这样: 2.分析 项目使用的是elementui框架,搜索栏这种表单提交,首先要使用el-form组件来封装,而复杂点就是表单项可能有很多种,例如input输入框.select选择框.日期时间选择框.日

  • Vue键盘事件用法总结

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件 键盘事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></sc

  • element-ui中select组件绑定值改变,触发change事件方法

    1.安装vuecli脚手架 2.终端输入 cnpm i element-ui -S 安装element-ui 3.按需引入select组件 在main.js中写入如下代码 /* 导入第三方库开始 */ import 'element-ui/lib/theme-chalk/index.css'; // 按需加载Select组件 import {Select,Option,Dialog,Button} from 'element-ui' Vue.use(Select) Vue.use(Option)

  • vue 项目软键盘回车触发搜索事件

    vue 项目软键盘回车触发搜索事件

    目的:掉起来右下角为搜索的按钮 步骤: 1.input的type改为search,再写keydown按下时的事件调取搜索事件的方法 这样安卓手机上回车就变成了"搜索",不过ios仍然是换行 2.input 外面套form,必须要有action,action="javascript:return true" 我的项目用van:想弹出数字键盘,并监听搜索(换行),在安卓上执行搜索按钮,在ios 执行blur,因为安卓上点完成不执行blur <form @submi

  • 实例详解ztree在vue项目中使用并且带有搜索功能

    zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 上篇文章给大家介绍了vue中如何使用ztree,大家可以点击查看. 之前博客介绍过怎么在vue里展示以及获取点击元素的内容,此文章之介绍搜索功能 html <el-form-item label="机构" class="ztree-par"> <i class="icon_org"

  • layer的prompt弹出框,点击回车,触发确定事件的方法

    做了个prompt弹出框,希望点击确定按钮的时候也能触发确定的事件,用户习惯的原因,在输入框输入框数据后,再重新拿起鼠标点击太麻烦,所以想着点击确定按钮触发事件. layer.prompt({title: '请输入数据', formType: 1, // 这个是确定按钮的事件 "success":function(){ // 键盘事件,判断回车 $("input.layui-layer-input").on('keydown',function(e){ if (e.

  • jQuery实现的回车触发按钮事件功能示例

    jQuery实现的回车触发按钮事件功能示例

    本文实例讲述了jQuery实现的回车触发按钮事件功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • vue 项目引入echarts 添加点击事件操作

    main.js中 import echarts from 'echarts' Vue.prototype.$echarts = echarts vue文件中 _this.calendarChart=_this.$echarts.init(document.getElementById('earlyWarningCalendar')) _this.calendarChart.on('click',function (param) { console.log(param) }) _this.cale

  • jQuery实现键盘回车搜索功能

    本来我一直认为一个搜索没有什么太难做的,直到我接到了上一个项目,让不使用按钮实现搜索这才让我开始在网上寻找这一技术,那么废话少说,将我的源码放上来给大家参考. 前台代码 <div class="fl search-box"> <button type="button" name="btnSubmit" id="btnSubmit" class="btnSubmit">搜索</b

  • 解决vue项目中type=”file“ change事件只执行一次的问题

    问题描述 在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件 <template> <div class="hello"> <input type="button" value="上传文件" name="" id="" @click="updata"> <input type=&quo

  • 总结IOS中隐藏软键盘的三种方式

    总结IOS中隐藏软键盘的三种方式

    一.使用软键盘的 Done 键隐藏键盘 出发软键盘隐藏最常用的事件是文本框的 Did End on Exit,它在用户按软键盘中的 Done 键时发生.选中一个UITextField控件,点击鼠标右键弹出面板,鼠标左键按住 Did End on Exit 事件旁边的圆圈,然后拖曳到右侧 .h 文件中,命名为 CloseTheKeyBoard,在 m 文件中具体实现如下图所示(此处同时显示 .h 文件与 .m 文件): 当页面中有很多个文本框时,如果每次都需要点文本框激活软键盘.输入后点击Retu

  • Vue项目中常用的实用技巧汇总

    目录 前言 1. 使用 $attrs 和 $listeners 进行多层级的数据和事件传递 2. 实现数据的双向绑定,方便维护数据 使用 .sync 实现 Prop 的"双向绑定" 使用 model 选项 3. 使用 Mixins 4. 使用动态组件去懒加载组件 5. 在组件作用域内的 CSS 中使用 ::v-deep  修改组件样式 6. 使用装饰器优化代码 7. 利用 require.context 去获取项目目录信息 总结 引用 前言 在 Vue 项目开发中,很容易产生一些问题,

  • Vue项目打包部署的实战过程记录

    Vue项目打包部署的实战过程记录

    目录 前言 一.准备工作--服务器和nginx使用 1. 准备一台服务器 2. nginx安装和启动 3. 了解nginx: 修改nginx配置,让nginx服务器代理我们创建的文件 二.Vue项目打包同步文件到远程服务器 1. 打包 2. 同步到远程服务器 3. 同步ssh key 三.非域名根路径发布 1. nginx配置 2. 项目配置 3. 绝对路径引用的静态资源找不到的问题 四.history模式部署 1. 项目配置 2. nginx配置 3. history模式部署到非域名根路径下

随机推荐