文本框中的按钮值

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文档 ：

注意：使用除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());
});

要么

jQuery ：（单击按钮时触发）

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