根据成功调用操作输入字段

Question

我有以下代码：

<div id="email-forgot-div">
    <input data-placement="bottom" type="text" class="form-control form-control-email" id="Forgot-Email" name="Forgot-Email">
    <button type="submit" class="btn btn-success" id="reg-forgot-submit">Submit</button>
    <div id="ajaxNotify"></div>
</div>

所以在我成功通话后，我正在尝试在forgot-email之后添加字段，我还希望将两个字段的大小调整为一半大小，现在大小是一个字段是完整大小并且它具有在线提交button。

现在我想显示两个字段并在同一行上提交button。怎么做？

Answer 1

您可以添加“浮动类别”，例如：

<input style="float:left;" /><button style="float:right;"></button>

如果有其他可用的方法，这是我能想到的唯一方法。试试那些。我使用花车将我的标识从我标题上同一行的标题中移开。你也考虑过“液体”（百分比宽度）的CSS，看看是否有帮助吗？另外，查看maxlength（允许的字符长度）大小控制在您输入更多字符之前可见的字符数。但是我不相信maxlength适用于按钮，但无论如何都要试一试。

<input size="30" maxlength="100" /><button size="15"></button>

希望这有效！

Answer 2

在大多数情况下，在页面上添加额外输入会更容易，并在提交表单时显示/隐藏它。我已经完成了一个简单的插件here - 当点击提交按钮时，它会向#email-forgot-div添加一个类。这个附加类显示了额外的输入并改变了表单元素的宽度。

修改后的html是：

<div id="email-forgot-div">
  <input data-placement="bottom" type="text" class="form-control form-control-email" id="Forgot-Email" name="Forgot-Email" />
  <input class="form-control extra" name="extra"/> 
  <button type="submit" class="btn btn-success" id="reg-forgot-submit">Submit</button>
  <div id="ajaxNotify"></div>
</div>

点击按钮时绑定类更改的javascript是：

$('#reg-forgot-submit').on('click', function() {
  $('#email-forgot-div').addClass('extra-input');
  return false;
}); 

相关的css是：

#email-forgot-div input, #email-forgot-div button {
  float: left;
  width: 50%;
}

.extra {
  display: none;
}

#email-forgot-div.extra-input input, #email-forgot-div.extra-input button {
  display: block;
  width: 33.333%;
}