单击其他输入时在输入上触发jquery函数

时间:2018-05-26 17:14:43

标签: javascript jquery html

我正在创建一个动态添加的输入表单。我希望这样做,当输入失去焦点时,它的值会被.00附加到它上面。到目前为止,我试过这个:

$(".money-input").on("click", function(e) {
  e.stopPropagation();
});

$(document).on("click", function (e) {
  $(".money-input").each(function() {
    var valTemp = $(this).val();
    if ((valTemp.indexOf(".00") < 0) && (valTemp != "")) {
      valTemp += ".00";
      $(this).val(valTemp);
    }
  });
});

我的问题是,它只有在我点击其他div但输入时才有效。此外,我还希望实现的是当我在一个输入上编辑某些内容然后将焦点切换到其他输入时,之前的输入值被.00附加。

任何帮助表示赞赏! :)

2 个答案:

答案 0 :(得分:1)

使用

$(".money-input").live('blur', function() {
    var valTemp = $(this).val();
    if ((valTemp.indexOf(".00") < 0) && (valTemp != "")) {
        valTemp += ".00";
        $(this).val(valTemp);
    }
});

https://dev.mysql.com/doc/refman/5.7/en/lock-tables-and-transactions.html是您失去焦点的&#39;事件。使用blur时,它会将此事件附加到现在和将来存在的元素中(因为您正在动态添加表单)。

答案 1 :(得分:1)

请求的行为很奇怪......请改用 step attribute

<input type='number' step='01'>

在输入中具有浮点值的最低要求是具有:type="number"step属性。在下面的演示中,有3种形式,每种形式有2个输入,总共6个输入。

  1. 前2个输入没有step属性。

  2. 动态创建第二对。第一个输入没有step属性,而第二个输入没有。

  3. 最后一对输入具有step属性。

    • 我修改了样式,因此当输入具有step属性时,其边框为红色虚线。没有必要这样做,它仅用于演示目的。

    • 在2个事件上注册了一个jQuery事件处理程序,一个是 blur event ,另一个是 change event 。这些事件会触发相同的处理程序,该句柄会在触发stepchange事件时将blur属性设置为输入。

    演示

    &#13;
    &#13;
    $('#form1').append("<input id='i2' class='money' type='number' value='0.00'>").append("<input id='i3' class='money' type='number' value='0.00' step='.01'>");
    
    $('.money').on('blur change', function(e) {
      if ($(this).val() > 0) {
        $(this).attr('step', '.01');
      }
    });
    &#13;
    input[step*=".01"] {
      border: 1px dashed red
    }
    &#13;
    <form id='form0'>
      <input id='i0' class='money' type='number' value='0.00'>
      <input id='i1' class='money' type='number' value='0.00'>
    </form>
    
    <form id='form1'></form>
    
    
    <form id='form2'>
      <input id='i4' class='money' type='number' value='0.00' step='.01'>
      <input id='i5' class='money' type='number' value='0.00' step='.01'>
    </form>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    &#13;
    &#13;
    &#13;