Question

我正在构建一个响应式网站w / Twitter Bootstrap 3，我正在试图弄清楚如何控制移动设备键盘上“下一步”键的行为。我的问题是如何为移动设备制作一个允许用户从一个输入字段移动到另一个输入字段的联系表单？例如，在输入他们的电子邮件地址后，用户可以按“下一步”，将光标移动到电话号码字段，依此类推。请参阅下面的尝试：

<div class="contact-form">
    <form id="contact" method="post" class="form" role="form" action="insert.php">
        <div class="row">

          <div class="col-lg-3 col-lg-offset-1 form-group">
          <input class="form-control" id="name" name="name" placeholder="Name" type="text" required autofocus />
          </div>

          <div class="col-lg-4 form-group">
          <input class="form-control" id="email" name="email" placeholder="Email" type="email" required />
          </div>

          <div class="col-lg-3 form-group">
          <input class="form-control" type="tel" id="phone" name="phone" placeholder="Phone Number" type="text" required />
          </div>

          <div class="col-lg-1 form-group">
          </div>
        </div>  

        <div class="row">
          <div class="col-lg-10 col-lg-offset-1 form-group">
          <textarea class="form-control" id="message" name="message" placeholder="Message" rows="5" required></textarea>
          </div>
          <div class="col-lg-1 form-group">
          </div>  
        </div>



        <div class="row">
        <div class="text-center">
        <button class="btn btn-primary btn-lg" type="submit">Submit</button>
        </div>
        </div>

    </form>
  </div>

我已经在网上搜索过了，我很难过！任何帮助深表感谢：）马特

Answer 1

我认为你正在寻找输入元素的焦点属性。我在其中一个项目中遇到过这个问题。我发现（遗憾的是）答案是没有保证的方法可以在所有设备上完成这项工作。您可以尝试.focus（）,. click（）或类似功能，但许多移动浏览器都会忽略它们，以提供更好的用户体验。但有一些解决方法。例如，请查看Programmatically focus on next input field in mobile safari

如何让“下一步”按钮移动到移动键盘上的联系表格中的下一个字段？

1 个答案: