在 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. 您将 innerHTML 的 linkContainer2 设置为 = 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，这也应该让你的生活更轻松。