javascript - 绕过javascript中的onblur事件在onclick事件上显示和隐藏div

Question

我有一个文本字段，它使用 onblur 事件来格式化货币数字。我想运行我的 onclick 函数，该函数在获取模糊值之前首先在表单上隐藏一个 div。问题是每次我在字段中单击时 div 都不会消失，并且当我在模糊后在公式中运行我的值时不计算。我在 on blur 功能中添加了一个警报功能，并且警报消息正在循环。每次单击文本字段时，我都在寻找显示隐藏 div 函数。

 <input name="txtA" type="text" id="txtA" value="<?php  if(isset($_POST['calculate'])){ echo 'R '.number_format($_SESSION['salesprice'],2);}else { echo $_SESSION['salesprice']; } ?>" size="50" onblur="this.value = 'R ' + formatNumber(this.value, 0, 0, true);" onclick = "return document.getElementById('linkContainer2').innerHTML = myFunction();"  />


       <br />
<div id="linkContainer2">My Content</div>
<script>
function myFunction()
{
    divTest = document.getElementById('linkContainer2');
    if (divTest.style.display === "none") {
        divTest.style.display = 'block';
    }
    else {
        divTest.style.display = "none";
    }
}
</script>

Answer 1

您的代码很难理解，因为您将 PHP、HTML 和 JavaScript 全部组合成一大堆。相反，我为您分离了每种语言:

<?php
    $value = $_SESSION['salesprice'];
    if (isset($_POST['calculate'])) $value = number_format($_SESSION['salesprice'], 2);
?>


<input id="txtA" name="txtA" type="text" value="<?=$value;?>" size="50" />
<br />
<div id="linkContainer2">My Content</div>


<script>
    String.prototype.formatCurrency = function(c, d, t) {
        var n = this.replace(/[,\$]/g,''), 
        c = isNaN(c = Math.abs(c)) ? 2 : c, 
        d = d == undefined ? "." : d, 
        t = t == undefined ? "," : t, 
        s = n < 0 ? "-" : "", 
        i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
        j = (j = i.length) > 3 ? j % 3 : 0;
        return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
     };



    Element.prototype.addEvent = function(eventName, callFunction) {
      if (this.addEventListener) this.addEventListener(eventName.substring(2), callFunction, false);
      else if (this.attachEvent) this.attachEvent(eventName, callFunction);
    };



    function get(el) {
        if (el) {
            if (typeof el === 'string' || !isNaN(el)) {
                if (el == 'document.body') return document.body;
                return document.getElementById(el);
            }
            else {
                if (el.id) {
                    if (document.getElementById(el.id)) return document.getElementById(el.id);
                    else if (typeof el == '') return el;
                }
                else return el;
            }
        }

        return false;
    }




get('txtA').addEvent('onfocus', function() {
    get('linkContainer2').style.display = 'none';
});


get('txtA').addEvent('onblur', function() {
    this.value = '$' + this.value.formatCurrency(2, '.', ',');
});

</script>

您可以在此处查看此工作:http://jsfiddle.net/6okLLg6k/

---

作为奖励，我有一些可能有用的建议:

1. 您将 linkContainer2 的 innerHTML 设置为 = myFunction。理论上这很好，但在您的情况下 myFunction 始终不返回任何内容。所以换句话说，您没有将其设置为空。

2. 在 myFunction 中，您再次设置了它的 innerHTML。这让我觉得我们可以在没有 myFunction 的情况下完成你想要的一切。

3. 我使用的是 onfocus，而不是 onclick。这应该具有相同的效果，但在使用 Tab 键输入文本框时也会捕获。

4. 我已将您的 PHP、HTML 和 JavaScript 分为 3 个不同的部分。我知道这看起来像是在浪费时间，但从长远来看，投入那一点额外的时间会让你的生活更轻松。像这样调试问题需要一半的时间。我强烈建议您将来以这种方式编写您的项目。

5. 我不确定你为什么要切换 linkContainer2 的显示，所以我只是让它的 display 总是 = none .如果有必要，您可以添加回您的 if 语句。

6. 我已经包含了一些您可能会觉得有用的额外 JavaScript 功能。我的 get 函数取代了 document.getElementById，使您的代码更易于阅读。我还包括了 addEvent 和 formatCurrency，它们应该也会让您的生活更轻松。