Question

我想定位属于特定名称形式的任何文本类型的输入。因为表单将包含许多输入字段，所以我不想定位特定的输入名称，而是捕获表单换行中发生的任何input[type="text"]的模糊（或焦点）事件。

我现在的代码，它不起作用：

$( document ).ready(function() {
    $('form[name="tax_form"] input[type="text"]').on("blur",function() {
        alert($(this).val());
    });
});

我回答了自己的问题。因为代码示例基本上是正确的，所以不需要多个人尝试解决无法解决的问题。这个问题与我放置javascript代码的地方有关，而与代码的结构或语法无关。

Answer 1

事件"change"的工作方式就是您想要的。单击输入时或者如果键入文本时，事件处理程序实际上不会触发，当输入文本和时它会触发，然后输入失去焦点。

在以下代码段中，您使用的相同选择器将委派给"change"事件。您会注意到['tax_form']有4个文本输入，但最后一个是唯一有效的输入。原因是，如果未为输入分配type属性，则默认情况下type为'text"。因此，当使用基于输入type="text"的选择器时，您必须牢记这一点。因此，如果您完全控制HTML，请确保每个输入都具有带有显式值的type属性，或使用更好的IMO类

段

$(document).ready(function() {
  $('form[name="tax_form"] input[type="text"]').on("change", function() {
    alert($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form name='notIt'>
  <fieldset>
    <legend>Not a Tax Form</legend>
    <input>
    <input type="text">
    <input>
    <input type="text">
  </fieldset>
</form>
<br/>
<br/>
<form name='stillNotIt'>
  <fieldset>
    <legend>Still not a Tax Form</legend>
    <input type="text">
    <input>
    <input type="text">
    <input>
  </fieldset>
</form>
<br/>
<br/>
<form name='tax_form'>
  <fieldset>
    <legend>Tax Form</legend>
    <input class='klass' value='TEXT INPUT BY DEFAULT'>
    <input value='TEXT INPUT BY DEFAULT'>
    <input name='text' value='TEXT INPUT BY DEFAULT'>
    <input type='number'>
    <input type='text' value='THIS ONE COUNTS'>
  </fieldset>
</form>

Answer 2

以前的评论员是对的，我的代码原样很好。我从头文件脚本文件中取出了我的选择器代码，并将其放在我的页脚脚本的底部，它按预期工作。

最后，我的代码不是问题所在，而是与我放置它的地方有关。可能是其他javascript或jQuery代码踩到它。

Answer 3

您的代码应该可以正常运行。这是一个证明它有效的实例。 tax_form字段应在console.log()上blur。 another_form不应该。

$(function() {
    $('form[name="tax_form"] input[type="text"]').on("blur",function() {
        console.log($(this).val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Tax Form</h1>
<form name="tax_form">
  <input type="text" name="first" value="first">
  <input type="text" name="second" value="second">
  <input type="text" name="third" value="third">
</form>

<h1>Another Form</h1>
<form name="another_form">
  <input type="text" name="first2" value="first2">
  <input type="text" name="second2" value="second2">
  <input type="text" name="third2" value="third2">
</form>

按输入类型和表单名称

3 个答案:

段