为什么我的输入在引导程序中格式不正确

Question

我有一个动态创建的表单，这就是 jquery 的原因（它更容易）。我试图弄清楚为什么输入字段的格式不正确。

我刚刚改变了它的格式化方式，从在表格中，变成了一种更容易引导的方式，这样，只有我放置图标的输入字段才能正常工作。当我在表中有相同的字段时，jQuery 可以正常工作。

我做错了什么？

还有一个jsfiddle。

这是表格的代表部分：

<div class="container">
  <div class="form-group row">
    <label for="first_name" class="sr-only">*
      <label for="id_first_name">First name:</label>
    </label>
    <div class="input-group">
      <input type="text" name="first_name" required maxlength="50" required id="id_first_name">
    </div>
  </div>
  <div class="form-group row">
    <label for="last_name" class="sr-only">*
      <label for="id_last_name">Last name:</label>
    </label>
    <div class="input-group">
      <input type="text" name="last_name" required maxlength="50" required id="id_last_name">
    </div>
  </div>
  <div class="form-group row">
    <label for="phone" class="sr-only">*
      <label for="id_phone">Phone:</label>
    </label>
    <div class="input-group">
      <input id="id_phone" name="phone" type="tel" required />
    </div>
  </div>
</div>

由于我的字段是动态创建的，而且它们的属性需要做更多的工作，所以我使用 jQuery 将 form-control 类添加到输入中，以及其他一些小事。

代码如下：

$("input[type='email']").parent('div:first').prepend('<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>');
$("input[type='tel']").parent('div:first').prepend('<div class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></div>');
$('input').addClass('form-control').each(function () {
    var $this = $(this);
    var $label = $('label[for="' + $this.attr('id') + '"]');
    $this.attr('placeholder', $label.text().slice(0, -1));
});
$('select').addClass('form-control');

Answer 1

发生这种情况是因为您在 input-group 元素中添加了常规输入，但没有在其中添加带有预期输入的图标。

对于任何没有图标的输入，将您的 html 更改为：

<div class="input-group">
  <input type="text" name="first_name" required maxlength="50" required id="id_first_name">
</div>

简单来说：

  <input type="text" name="first_name" required maxlength="50" required id="id_first_name">

格式将按预期工作。

working jsfiddle