Question

我有一个跟踪发货模式，我希望在按钮上输入值，这些值在文本框中输入。

我尝试了但是没有用。

请帮我解决错误。

<script>
	window.onload = function(){
document.getElementById('cno').addEventListener('keyup', function() {
    document.getElementById('cnor').value = this.value;
})};
</script>
<div class="modal fade" id="track"			tabindex="-1" role="dialog" 
											aria-labelledby="trackLabel" aria-hidden="true">

										  	<div class="modal-dialog modal-lg">
											    <div class="modal-content">
											      	<div class="modal-header">
												        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
												        <h3 class="modal-title" id="trackLabel">Track Your Shipment.</h3>
											      	</div>

											      	<div class="modal-body">
														<form id="Track">
														<div class="row">
															<div class="col-md-6">
																<div class="form-group">
																    <label for="name">Enter Consignment Number</label>
																    <input id="cno" name="cno" type="text" class="form-control"  required="" placeholder="Eg.:- JU05GHY1532" onkeyup="function()"><button type="submit" id="cnor" name="cnor" class="btn btn-primary btn-lg">Track</button>
																</div>
															</div>
															
													</form>
											      </div>
											    </div><!--/.modal-content-->
										  	</div><!--/.modal-dialog-->
										</div><!-- Modal END -->

Answer 1

您需要等到元素加载，然后将代码移到window.onload回调或在标记中的元素后添加代码。

如果您要更新按钮中显示的文字内容，请更新textContent或innerHTML属性，并使用Html5 input事件进行同步更新。

window.onload = function(){
  document.getElementById('cno.').addEventListener('input', function() {
    document.getElementById('cno.r').textContent = this.value;
  });
}

<script>
  window.onload = function() {
    document.getElementById('cno.').addEventListener('input', function() {
      document.getElementById('cno.r').textContent = this.value;
    });
  }
</script>
<div class="modal fade" id="track" tabindex="-1" role="dialog" aria-labelledby="trackLabel" aria-hidden="true">

  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title" id="trackLabel">Track Your Shipment.</h3>
      </div>

      <div class="modal-body">
        <form id="Track">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="name">Enter Consignment Number</label>
                <input id="cno." name="cno." type="text" class="form-control" required="" placeholder="Eg.:- JU05GHY1532"><button type="submit" id="cno.r" name="cno.r" class="btn btn-primary btn-lg">Track</button>
              </div>
            </div>

        </form>
        </div>
      </div>
    </div>
  </div>

<div class="modal fade" id="track" tabindex="-1" role="dialog" aria-labelledby="trackLabel" aria-hidden="true">

  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title" id="trackLabel">Track Your Shipment.</h3>
      </div>

      <div class="modal-body">
        <form id="Track">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="name">Enter Consignment Number</label>
                <input id="cno." name="cno." type="text" class="form-control" required="" placeholder="Eg.:- JU05GHY1532"><button type="submit" id="cno.r" name="cno.r" class="btn btn-primary btn-lg">Track</button>
              </div>
            </div>

        </form>
        </div>
      </div>
    </div>
  </div>
  <script>
    document.getElementById('cno.').addEventListener('input', function() {
      document.getElementById('cno.r').textContent = this.value;
    });
  </script>

仅供参考：最好不要在id值中使用.，以便将其保留为有效标识符。

来自MDN docs：

注意：使用ASCII字母和数字以外的字符，'_'，' - '和'。'可能会导致兼容性问题，因为它们在HTML 4中不被允许。虽然HTML 5中已取消此限制，但ID应以字母开头以便兼容。

Answer 2

使用jQuery：

$("#input").on('change', function(){
   $("#button").val($("#input").val());
});

Answer 3

<强> HTML：

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"/>
</head>

<body>
  <input type="text" id="input" />
  <button id="continue">Continue</button>
</body>

模态HTML：

<button id="track">Track Button</button>

jQuery：（在输入字段中更改时触发）

$("#input").on('change', function(){
   $("#track").val($("#input").val());
});

OR

jQuery：（点击按钮时触发）

$("#continue").on('click', function(){
   $("#track").val($("#input").val());
});

按钮上的值，如文本框中所示

3 个答案: