对于onblur 事件的小记

定义和用法:

onblur 事件发生在对象失去焦点时。
onblur 事件最常与表单验证代码一起使用（例如，当用户离开表单字段时）。

提示： onblur 事件与 onfocus 事件相反。

提示： onblur 事件类似于 onfocusout 事件。主要区别在于 onblur 事件不会冒泡。因此，如果您想找出元素或其子元素是否失去焦点，可以使用 onfocusout 事件。但是，您可以通过使用 onblur 事件的 addEventListener() 方法的 useCapture 参数（可选）来实现这一点。

以下为做业务中遇到的场景：火车票按百分比计算退票金额，在输入给定的百分比后，自动计算退票费以及退款金额，代码如下：

<div class="ibox-content">
  <table cellpadding="0" cellspacing="0" border="0" style="width:100%">
    <thead>
      <tr>
        <th>选择</th>
        <th>姓名</th>
        <th>票价</th>
        <th>退票费百分比</th>
        <th>退票费</th>
        <th>退款金额</th>
      </tr>
    </thead>
    <tbody>
      <c:forEach items="${refundable }" var="passenger" varStatus="i">
        <input type="hidden" id="index" value="${i.index}">
        <tr>
          <input type="hidden" value="${passenger.itemId }" id="passengerNo${i.count}"
                 name="passengerNo${i.count}">
          <td><input type="radio" name="counter"
                     value="${i.count }"></td>
          <td>${passenger.passengerName }</td>
          <td><input id="price${i.index}" value= "${passenger.ticketPrice }" onblur="calculate(this,${i.index});"></td>
          <td>
            <input type="text" id="refundPercent${i.index}" name="refundPercent" onblur="calculate(this,${i.index});" style="width: 70px">
          </td>
          <td><input type="text" id="refundFee${i.index}"
                     name="refundFee" style="width: 70px">
          </td>
          <td><input type="text" id="shouldRefund${i.index}"
                     name="shouldRefund">
          </td>
        </tr>
      </c:forEach>
    </tbody>
  </table>
</div>

需要注意的点是：我在上面input元素中定义id为"price${i.index}"，所以后续做计算的javascript中也要传入定义时的index，格式如下：

let price = document.getElementById(“price” + index);

<script type="text/javascript">

    function calculate(obj,index) {
        let price = document.getElementById("price" + index);
        let refundPercent = document.getElementById("refundPercent"  + index);
        let fee = ((parseFloat(price.value) * (parseFloat(refundPercent.value) / 100)));
        document.getElementById("refundFee"+index).value = CancelFee(fee);
        let res = (parseFloat(price.value) - (parseFloat(price.value) * (parseFloat(refundPercent.value) / 100)));
        document.getElementById("shouldRefund"+index).value = CancelFee(res);
    }

    function CancelFee(price) {
        let t = price;
        let T = parseInt(t);
        if ((t - T) < 0.25) {
            t = parseInt(t);
        } else if (0.25 <= (t - T) && (t - T) < 0.75) {
            t = parseInt(t) + 0.5;
        } else {
            t = parseInt(t) + 1;
        }
        return t;
    }


		// 线下申请退款
    function applyRefundOL() {
        debugger;
        let val = "";
        let i = document.getElementById("index").value;
        $("input[name='counter']").each(function () {
            if ($(this).prop("checked") === true) {
                val = $(this).val();
            }
        });

        if (val === "") {
            imsg("请至少选择一位乘客！");
            return false;
        }
        // 获取退票子单号
        let orderItemNo = $("#passengerNo" + val).val();
        // 获取退票单号
        let refundNo = $("#refundNo" + val).val();
        // 获取退票金额
        let shouldRefund = $("#shouldRefund" + i).val();
        if (shouldRefund == null || shouldRefund == 0 || shouldRefund == ""){
            imsg("请填写应退金额！(ps:填写要退给用户多少费用（大于0的正数）)");
            return false;
        }
        var index = layer.confirm("是否申请退票?", {btn: ["确认", "取消"]}, function () {
            layer.load(1, {
                shade: [0.3, '#05f0d8']
            });
            $.ajax({
                type: "POST",
                url: ctx + "/product/tra/trainSupplement/refundTicket",
                data: {
                    orderItemNo: orderItemNo,
                    refundNo: refundNo,
                    shouldRefund: shouldRefund
                },
                success: function (data) {
                    $(".modal-backdrop").addClass("hide");
                    $(".bady").addClass("hide");
                    layer.closeAll();
                    layer.alert(data.message);
                }
            });
        }, function () {
            layer.close(index);
        });
    }
</script>