如何在 JavaScript 中做同样的事情？ [关闭]

Question

我有这个 jQuery，它可以自动计算焦点何时离开该领域。我需要在 JavaScript 中使用相同的 this 并在每次页面刷新后调用该函数。现在，在每次验证之后，我从字段中进行的计算都会丢失。

<script language="javascript">
    $(function () {
        $(document).on("blur", "input[type=text]", function () {
            var imekontrolebase = $(this).attr('id');
            var ime = ($(this).attr('id')).substr(12, $(this).attr('id').length);
            var n = ime.indexOf("_");
            var red = ime.substr(n+1);

            var imekol1 = "txt_OBR_P_1_1_" + red;                                    
            var imekol2 = "txt_OBR_P_1_2_" + red;
            var imekol3 = "txtKOL3_" + red;

            var txt_OBR_P_1_1 = parseFloat($('#' + imekol1).val().replace(/\,/g, '')) || 0
            var txt_OBR_P_1_2 = parseFloat($('#' + imekol2).val().replace(/\,/g, '')) || 0

            var txtKOL3 = txt_OBR_P_1_1 + txt_OBR_P_1_2;

            if (txtKOL3 === 0 || txtKOL3 === Infinity || isNaN(txtKOL3)) {                                       
                txtKOL3 = $('#' + imekol3).val("");
            }
            else {
                var ukupnoID3 = ("" + txtKOL3).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, function ($1) { return $1 + "," });
                $('#' + imekol3).val(ukupnoID3);
            }
        })
    })
</script>

我需要创建一些这样的函数：

<script language="javascript">
    function startCalc() {
    }
</script>

并在每次验证后从服务器端调用它。

Page.ClientScript.RegisterStartupScript(Page.GetType(), "Script", "startCalc()", True)

Answer 1

如果你想要 Vanilla JavaScript 解决方案，你可以试试这个：

function startCalc() {
    var root = document.documentElement || document.body;
    root.addEventListener('blur', function(e) {
        var node = e.target;
        if (node.nodeName == 'input' &&
            node.getAttribute('type') == 'text') {
            var imekontrolebase = node.getAttribute('id');
            var ime = imekontrolebase.substr(12, imekontrolebase.length);
            var n = ime.indexOf("_");
            var red = ime.substr(n+1);

            var imekol1 = "txt_OBR_P_1_1_" + red;                                    
            var imekol2 = "txt_OBR_P_1_2_" + red;
            var imekol3 = "txtKOL3_" + red;

            var txt_OBR_P_1_1 = parseFloat(document.getElementById(imekol1).value.replace(/\,/g, '')) || 0
            var txt_OBR_P_1_2 = parseFloat(document.getElementById(imekol2).value.replace(/\,/g, '')) || 0

            var txtKOL3 = txt_OBR_P_1_1 + txt_OBR_P_1_2;

            if (txtKOL3 === 0 || txtKOL3 === Infinity || isNaN(txtKOL3)) {                                       
                txtKOL3 = document.getElementById(imekol3).value;
            }
            else {
                var ukupnoID3 = ("" + txtKOL3).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, function ($1) { return $1 + "," });
                document.getElementById(imekol3).value = ukupnoID3;
            }
        })

    });
}

基本上

• $('#name') -> document.getElementById('name'); 或
• document.querySelector('#name') 返回单个元素或

• document.querySelectorAll('#name') 像对​​象一样返回数组

• jqueryObject.val() -> htmlNode.value

• $(document).on('blur' -> node.addEventListener('blur' 并且您需要使用 event.target 检查正确的节点