引导表单输入在单击时不允许编辑答案

【问题标题】：Bootstrap form input does not allow for editing when clicked引导表单输入在单击时不允许编辑
【发布时间】：2017-12-09 08:20:53
【问题描述】：

问题：我的引导表单不允许编辑。

详情：我在 .thumbnail 和 .caption 类中使用引导表单。我想为每个表单组设置非常具体的列大小，这就是我使用嵌套网格系统的原因。当我单击输入时，绝对没有任何反应（字面上没有）。但是，当我将 jQuery 事件侦听器连接到输入时，事件确实会触发。为什么我的表单似乎无法编辑？先感谢您！

<div class="thumbnail">
  <div class="col-xs-10 col-centered">
    <h3 id="application-type">Web Development Application</h3>
    <hr>
  </div>
  <div class="caption row">
    <form class="col-xs-12" method="post">
      <div class="form-group row">
        <label for="first-name" class="col-sm-3 col-form-label"><strong>First Name</strong></label>
        <div class="col-sm-9">
          <input id="first-name" type="text" class="form-control" placeholder="John">
        </div>
      </div>
      <div class="form-group row">
        <label for="last-name" class="col-sm-3 col-form-label"><strong>Last Name</strong></label>
        <div class="col-sm-9">
          <input id="last-name" type="text" class="form-control" placeholder="Doe" />
        </div>
      </div>
      <div class="form-group row">
        <label for="apply-email" class="col-sm-3 col-form-label"><strong>Email Address</strong></label>
        <div class="col-sm-9">
          <input id="apply-email" type="email" class="form-control" placeholder="johnnyappleseed@gmail.com" />
        </div>
      </div>
      <div class="form-group row">
        <label for="linked-in" class="col-sm-3 col-form-label"><strong>LinkedIn</strong></label>
        <div class="col-sm-9">
          <input id="linked-in" type="text" class="form-control" placeholder="mylinkedIn.com" />
        </div>
      </div>
      <div id="show-portfolio" style="display: none;" class="form-group row">
        <label for="portfolio" class="col-sm-3 col-form-label"><strong>Portfolio</strong></label>
        <div class="col-sm-9">
          <input id="portfolio" type="text" class="form-control" placeholder="mylinkedIn.com" />
        </div>
      </div>
      <div class="form-group row">
        <label for="apply-file-btn" class="col-sm-3 col-form-label"><strong>CV</strong></label>
        <div class="col-sm-9">
          <ul class="file-btn-group">
            <li>
              <span class="btn btn-primary btn-file">
                                Upload <input class="form-control" type="file">
                            </span>
            </li>
            <li class="file-name">
              <span>No file chosen...</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-sm-12">
          <button type="submit" class="submit-btn col-sm-4 col-sm-offset-8 btn btn-success btn-mini">Submit!</button>
        </div>
      </div>
    </form>
  </div>
</div>

【问题讨论】：

对我来说很好用.. 在这里查看jsfiddle.net/DChandraShekhar/goh8rpcm/2
@connor 有什么更新吗？
仍然对我不起作用，它在小提琴中起作用，但在我的实际页面上不起作用。我尝试删除表单并将其放在我页面上的其他位置进行测试，但仍然没有。你有同样的问题@TheDarkNight
最新更新：如果我将必填参数添加到输入字段，然后单击提交，则将必填字段置于焦点并让我输入。

标签： css html forms twitter-bootstrap-3

【解决方案1】：

<div class="thumbnail">
  <div class="col-xs-10 col-centered">
    <h3 id="application-type">Web Development Application</h3>
    <hr>
  </div>
  <div class="caption row">
    <form class="col-xs-12" method="post">
      <div class="form-group row">
        <label for="first-name" class="col-sm-3 col-form-label"><strong>First Name</strong></label>
        <div class="col-sm-9">
          <input id="first-name" type="text" class="form-control" placeholder="John">
        </div>
      </div>
      <div class="form-group row">
        <label for="last-name" class="col-sm-3 col-form-label"><strong>Last Name</strong></label>
        <div class="col-sm-9">
          <input id="last-name" type="text" class="form-control" placeholder="Doe" />
        </div>
      </div>
      <div class="form-group row">
        <label for="apply-email" class="col-sm-3 col-form-label"><strong>Email Address</strong></label>
        <div class="col-sm-9">
          <input id="apply-email" type="email" class="form-control" placeholder="johnnyappleseed@gmail.com" />
        </div>
      </div>
      <div class="form-group row">
        <label for="linked-in" class="col-sm-3 col-form-label"><strong>LinkedIn</strong></label>
        <div class="col-sm-9">
          <input id="linked-in" type="text" class="form-control" placeholder="mylinkedIn.com" />
        </div>
      </div>
      <div id="show-portfolio" style="display: none;" class="form-group row">
        <label for="portfolio" class="col-sm-3 col-form-label"><strong>Portfolio</strong></label>
        <div class="col-sm-9">
          <input id="portfolio" type="text" class="form-control" placeholder="mylinkedIn.com" />
        </div>
      </div>
      <div class="form-group row">
        <label for="apply-file-btn" class="col-sm-3 col-form-label"><strong>CV</strong></label>
        <div class="col-sm-9">
          <ul class="file-btn-group">
            <li>
              <span class="btn btn-primary btn-file">
                                Upload <input class="form-control" type="file">
                            </span>
            </li>
            <li class="file-name">
              <span>No file chosen...</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-sm-12">
          <button type="submit" class="submit-btn col-sm-4 col-sm-offset-8 btn btn-success btn-mini">Submit!</button>
        </div>
      </div>
    </form>
  </div>
</div>

您的代码似乎运行良好。

【讨论】：

【解决方案2】：

我最终想出了一个解决方法。这不是最好的解决方案，因为它需要一些 jQuery/js 并且必须有解决 html 结构问题的方法。但是，如果其他人遇到与此类似的问题，我想出了一个快速的 jQuery 解决方法，它在每个表单组上放置一个事件以检测点击，然后将子输入置于焦点。

$("#application .form-group").on("click", function() {
  $(this).children('div').children('input').focus();
});

【讨论】：