我有一个跟踪发货的模式,我想在其中输入文本框中的按钮值。
我已经尝试过了,但是没有用。
请帮我解决错误。
<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">×</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 -->
最佳答案
您需要等到元素加载完毕,因此将代码移动到 window.onload
回调或在标记中的元素之后添加代码。
如果要更新按钮中显示的文本内容,请更新textContent
或 innerHTML
属性(property)及使用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">×</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">×</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
中使用 .
不是最佳实践。更好地保持其作为有效标识符的值(value)。
来自 MDN docs :
Note: Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.
关于javascript - 按钮上的值与文本框中一样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44587666/