时间戳

首页 > 解决方案 > onKeyup 事件调用时查找控件的 id

javascript - onKeyup 事件调用时查找控件的 id

问题描述

我想找到输入控件的 id。这是 HTML 代码。

<div id="product">
    <div class="inputHolderOrder">
        <p style="margin-bottom: 2px;">Product Name</p>

        <input type="text" id="pro_data_0" class="inputRight pro input_wid" name="product_name[]" style="" onkeyup="productSearch('1');" >

        <div id="idProduct_0" class="proSea" style="position: absolute;z-index: 111111111111;background: #fff;">       

        </div>                         
    </div>

这里 id 将在 foreach 循环上动态生成。ID 类似于“pro_data_0、pro_data_1、pro_data_2、pro_data_3”。

这是我的 Javascript 代码。

function productSearch(pagev){
    $("#product").find("input").on('input', function () {
        var idname = $(this).attr('id');
        console.log(idname);
        var input_data = $('#'+idname).val();
        console.log(input_data);
    });
}

这是第一次返回 id，但不是第二次。

我.find('input')用来查找输入文本的控件。

标签： javascriptjqueryhtml

解决方案

由于您使用的是 jQuery，因此简化了您的代码，如下所示：-

HTML（无需这样做onkeyup="productSearch('1');")：

<div id="product">
  <div class="inputHolderOrder">
    <p style="margin-bottom: 2px;">Product Name</p>

    <input type="text" id="pro_data_0" class="inputRight pro input_wid" name="product_name[]" style="">

    <div id="idProduct_0" class="proSea" style="position: absolute;z-index: 111111111111;background: #fff;">

    </div>
  </div>

jQuery:-

$(document).ready(function() {
  $('#product input[type=text]').keyup(function() {
    var idname = $(this).attr('id');
    console.log(idname);
    var input_data = $(this).val();
    console.log(input_data);
  })
});

输出：- https://jsfiddle.net/y93ajrtm/ 和https://jsfiddle.net/7q9xu1eg/

注意：- 确保在您的脚本代码之前添加 jQuery 库

推荐阅读