javascript - 无法获取带空格的文本框值 - jquery

Question

我有一个文本框和一个按钮，我编写了一个脚本，当单击按钮时，创建新的文本框并将其添加到表单中。

但是当我有像 32 bit 这样的文本并单击按钮时，它创建了一个具有类似 32 值的文本框。我得到检查元素，结果是:

<input type="text" name="Options" class="field-input add-more" value="32" bit="">

我的脚本:

 $("#add-more").click(function(e){
    e.preventDefault();
    var text = $("#more-text");

    var newTag = '<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" value='+ text.val() + ' /><span class="btn-sm btn-danger remove-me field-input">x</span></div>';
    $("#frm-fields").append(newTag);
    text.val("");
});

请参阅下面的示例。

 $("#add-more").click(function(e){
        e.preventDefault();
        var text = $("#more-text");

        var newTag = '<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" value='+ text.val() + ' /><span class="btn-sm btn-danger remove-me field-input">x</span></div>';
        $("#frm-fields").append(newTag);
        text.val("");
    });

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row "  id="div-fields">
            <div class="col-lg-12">
                
                <div class="form-horizontal" id="frm-fields-options">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" id="more-text" />
                            <div class="input-group-addon">
                                <span class="btn btn-sm btn-success" id="add-more">+</span>
                            </div>
                        </div>
                    </div>
                    <div id="frm-fields" class="row">
                     
                    </div>
                </div>
            </div>
         
        </div>

Answer 1

使用 jQuery 方法 .val() 通过将 HTML 字符串转换为 jQuery 对象来设置文本。

 //Create a jQuery object
 var newTag = $('<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" /><span class="btn-sm btn-danger remove-me field-input">x</span></div>');

 //Set the text and append to form
 $("#frm-fields").append(newTag.find('input').val(text.val()).end());

$("#add-more").click(function(e) {
  e.preventDefault();
  var text = $("#more-text");

  var newTag = $('<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" /><span class="btn-sm btn-danger remove-me field-input">x</span></div>');

  $("#frm-fields").append(newTag.find('input').val(text.val()).end());
  text.val("");
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row " id="div-fields">
  <div class="col-lg-12">

    <div class="form-horizontal" id="frm-fields-options">
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control" id="more-text" />
          <div class="input-group-addon">
            <span class="btn btn-sm btn-success" id="add-more">+</span>
          </div>
        </div>
      </div>
      <div id="frm-fields" class="row">

      </div>
    </div>
  </div>

</div>