javascript - 为什么 onkeyup 和 keyup 都不起作用？

问题描述

我想显示用户<a>在输入字段中的文本上输入的内容。我已经在 javascript 中尝试过.onkeyup，addEventListener但它们都不能正常工作，虽然它可以检测到目标输入对象，但是当它进来时它.onkeyup什么addEventListener也不做。

这是我想做的事情：

当用户在输入字段中输入名字时，它应该显示在<a>超链接文本中（甚至应该应用退格键击）

这是我的视图/刀片模板中的代码段：

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#guestInfo0">User Information</a></li>
    @for($guest_no = 1; $guest_no<=$guest_quantity; $guest_no++)
        <li>
            <a data-toggle="tab" 
                href="#guestInfo{{$guest_no}}" 
                id = "linkText">Guest #{{$guest_no}} //Target ID = linkText (this is where the changes will be applied)
            </a>
        </li>
    @endfor
</ul>
.......
<input id="passenger_f_name" type="text" 
class="form-control @error('passenger_f_name') is-invalid @enderror" 
placeholder = "First Name for Passenger #{{$tab}}" name="passenger_f_name"
value="{{ old('passenger_f_name') }}" required autocomplete="passenger_f_name" 
autofocus>
.......
<script type="application/javascript">

    var linkBox = document.getElementById('passenger_f_name');

    linkBox.onkeyup = function(){
        //alert("LOL"); //Used for checking if onkeyup is working properly = result: false
        document.getElementById('linkText').innerHTML = linkBox.value;
    }

</script>

我不知道为什么它不起作用但我怀疑控制台日志中的 [DOM] 警告（发布屏幕截图而不是在此处复制和粘贴，因为它在 google chrome 控制台中没有复制警告消息的选项）：

它具有三个输入，因为每个选项卡都有一个表单，并且其上的输入具有相同的名称和 ID（取决于 for 循环关于将生成多少表单的条件）。

PS我正在使用：

Google Chrome 版本 79.0.3945.130（官方版本）（64 位）
jQuery 3.4.1 和引导程序 3.4.1
拉拉维尔 6.0

标签： javascriptjqueryhtmllaraveldom

您需要唯一的 ID

如果有一个输入字段和 3 个客人，这里是如何做到的

$("#passenger_f_name").on("input",function() {
  $("li.active .linkText").text(this.value)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li><a data-toggle="tab" href="#guestInfo0">User Information</a></li>
  <li>
    <a data-toggle="tab" href="#guestInfo{{$guest_no}}" class="linkText">Guest #1</a>
  </li>
  <li><a data-toggle="tab" href="#guestInfo0">User Information</a></li>
  <li>
    <a data-toggle="tab" href="#guestInfo{{$guest_no}}" class="linkText">Guest #2</a>
  </li>
  <li><a data-toggle="tab" href="#guestInfo0">User Information</a></li>
  <li class="active">
    <a data-toggle="tab" href="#guestInfo{{$guest_no}}" class="linkText">Guest #3</a>
  </li>
</ul>
<input id="passenger_f_name" type="text" class="form-control" placeholder="First Name for Passenger #{{$tab}}" name="passenger_f_name" value="" required autocomplete="passenger_f_name" autofocus>

javascript - 为什么 onkeyup 和 keyup 都不起作用？

问题描述

解决方案

推荐阅读