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

本文介绍了如何在H5移动端页面中，通过设置表单元素type属性，使得用户可以使用手机键盘上的‘前往’或‘GO’键，以及电脑键盘的回车键来提交表单。强调了当表单内有多个button时，确保每个按钮都设置type属性以避免提交失败。同时提供了相关的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

登录和搜索时“前往”、“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>