當用戶在html表的文本字段中輸入文本時，調用哪個事件偵聽器

Question

我正在使用html和jquery開發UI。 我有一個具有多個列的html表，Product1和Product2列包含下拉列表。 當用戶在“描述”字段中輸入文本時，我想驗證Product1和Product2字段。

目前，使用下面的代碼，我正在檢查用戶是否在下拉列表中為Product1和Product2的每一行選擇了相同的值，並顯示彈出對話框，提示“ Product1和Product2不能具有相同的值”。 當用戶在“描述”字段中輸入文本時如何調用以下邏輯，而不是在用戶更改下拉列表時調用 （ $（“ select”）。change ..）

樣例代碼：

$("select").change(function() 
       {   
       var row = $(this).closest("tr");
       var product1_drop = $('.product1',row).val();
       var product2_drop = $('.product2',row).val();
       if(product1_drop == product2_drop ){       
            alert('Product1 and Product2 cannot have same value');
      }
   });

演示鏈接： http : //plnkr.co/edit/dFjOUUtcvfRcRyZrVdrw?p=preview

-編輯-

注意 ：用戶可以按任何順序在字段中輸入值，但是我想驗證描述字段中是否有文本。例如，用戶可以在Product1中選擇值，然后輸入OrderID和Description然后在Product2中選擇值，因此現在如果用戶未在“描述”字段中輸入任何內容，則不應檢查該條件。

Answer 1

您可以偵聽“輸入”事件：

$("#productTable input[name=description]").on("input", function validate() {
  var row = $(this).closest("tr");
  var product1_drop = $(".product1", row).val();
  var product2_drop = $(".product2", row).val();
  if (product1_drop == product2_drop) {
    alert("Product1 and Product2 cannot have same value");
  }
});

http://plnkr.co/edit/ABFfbH0yb4MOFoJvN94v?p=preview

“更改”事件和“輸入”事件之間的區別在於，當輸入失去焦點時將觸發“更改”，而當其內容更改時將觸發“輸入”。

根據@ user3684675的更新進行編輯：

您可以提取“驗證”功能並在描述和產品更改時調用它：

$("#productTable input[name=description]").on("input", validate);
$("#productTable select").on("change, validate);

然后，應在“驗證”功能內檢查說明是否為空：

if (!$("input[name=description", row).val()) return;

Answer 2

我為您創建了樣本小提琴 。 作為總結，您還需要為產品和描述字段綁定輸入處理程序，並為任何事件調用validate方法。

$("select").change(function() {   
         var row = $(this).closest("tr");
         var product1_drop = $('.product1',row).val();
         var product2_drop = $('.product2',row).val();
         var descValue = $('input[name="description"]').val();
                validate(product1_drop,product2_drop, descValue);
       });

        $('input[name="description"]').on('input', function(e){
          var row = $(this).closest("tr");
          var product1_drop = $('.product1',row).val();
            var product2_drop = $('.product2',row).val();
            validate(product1_drop,product2_drop, $(this).val());
        });