h5移动端使用手机自带软键盘的“前往”、“go”键提交表单

这也是我自己在项目中遇到的问题，在网上找了很久都没有找到类似的。试了很多次浪费了很多时间

登录和搜索时“前往”、“go”或者回车(电脑键盘)键提交表单（form）

表单里有一个type=”submit”或者type=”text”就可以用“前往”、“go”或者回车键提交表单

但是要注意，如果表单中有两个button按钮，一定都要设置type，不然提交不成功（因为用input我们都会去设置type）。

有登录按钮时，只给button设置type="submit"就可以，不用加事件。给form加提交事件（submit）就可以

搜索同理

代码如下：

<div class="contentInner"><form  action="" method="post" :model="loginForm"  ref="loginForm" @submit.prevent="handleLogin"><div class="loginTitle"><p>欢迎登录</p></div><div class="loginContent"><div class="loginInput"><p>用户名</p><input type="text" name="userName"  placeholder="请输入用户名" v-model="loginForm.userName" autocomplete="off"></div><div class="loginInput twoInput"><p>密码</p><div class="passwordInput"><input v-bind:type="passwordType" name="password"  placeholder="请输入密码" v-model="loginForm.password"><span @click="showPwd"><img v-if="showEyeB" src="../../assets/img/visible.png"> <img v-else-if="showEyeO" src="../../assets/img/invisible.png"></span></div></div><button type="button" class="loginForget" @click.stop="forgetPassword">忘记密码？</button><div class="loginBtn"><button type="submit" >登录</button></div></div></form>
</div>

h5移动端使用手机自带软键盘的“前往”、“go”键提交表单相关推荐

h5页面元素聚焦手机无法弹出键盘
移动端h5做手机app的直播视频碰到的问题 h5页面元素聚焦手机无法弹出键盘问题是这样产生的: 公司最近要搞一个直播的h5活动页内嵌到app上,当然我就来负责这个了. 但是这个项目我是半道接手的,原 ...
微信h5页面提交表单后返回键重复提交的问题
微信h5页面提交表单后返回键重复提交的问题问题描述:h5表单提交保存成功之后,手机返回后原来的页面还能提交表单. 示例: mui.post('savexxxx',data,function(res) ...
小程序提交表单mysql_GitHub - kun19911227/minipro: 微信小程序提交带图片的表单
minipro 微信小程序提交带图片的表单目录说明 upload_images ├── pages │ ├── upload_info 提交表单 │ └── display_info 信息展示 ├─ ...
uniapp - [完美解决] 手机数字键盘没有小数点，当 input 输入框的 type 属性设置 number 后，手机系统的软键盘无法输入小数点和符号问题（此方案 uniapp 全端全平台适用）
效果图正常在uniapp项目中,用户想要输入数字或金额时,通常都会将 <input> 的 type 属性设置为 number.但是问题来了,可能在苹果IOS手机.小程序上.个别安卓机上就 ...
js手机键盘遮挡_iphone手机微信页面软键盘遮挡input输入框解决方法
现象描述:iphone手机微信页面,用position: fixed;定位的input或textarea输入框,在获取输入焦点时,会被弹出的输入法软键盘遮挡,导致用户无法看到输入框,效果如图: 简化测 ...
vant 软键盘_移动端页面输入底部被软键盘遮挡问题
概述近期有个移动端页面的项目,存在需要用户输入的表单信息.因为页面不存在滑动(通过overflow设为hidden的方式),所以在点击input标签输入信息时,在安卓机下键盘会遮挡页面底部内容,当点 ...
web端ios布局fixed元素软键盘唤起时fixed失效
在ios上做了一个简单的页面头部置顶底部置顶源码如下: <!DOCTYPE html> <html lang="en"> <head><m ...
VS 2019 MFC Edit Control控件自绘带软键盘
实现功能:点击Edit控件后弹出软键盘,并能设置软键盘的输入最大者和最小值,软键盘采用非模态对话框创建,软键盘按钮字体颜色.背景颜色可以改变.Edit控件获得焦点和失去焦点后字体颜色和背景颜色动态可变 ...
力软快速开发平台推荐功能之表单应用
表单在企业信息系统中的应用比较常见,那在力软快速开发平台中如何较为便捷的实现表单功能呢,我们接下来做一个基础演示. 1.表单设计表单设计模板共提供有11个大类,基本涵盖了常用表单形式,同时可以根据自 ...

h5移动端使用手机自带软键盘的“前往”、“go”键提交表单

表单里有一个type=”submit”或者type=”text”就可以用“前往”、“go”或者回车键提交表单

h5移动端使用手机自带软键盘的“前往”、“go”键提交表单相关推荐

最新文章

热门文章