Question

我有一个文本字段，它使用onblur事件来格式化货币数字。我想运行我的onclick函数，它在获取模糊值之前首先隐藏表单上的div。问题是我每次点击字段div都没有消失，当我在模糊后运行我的值时，然后不计算。我在on blur功能中添加了一个警报功能，并且警报消息正在循环播放。我每次点击文本字段时都会寻找show hide 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/

作为奖励，我有一些可能有帮助的指示：

您将innerHTML的{{1}}设置为= linkContainer2。从理论上讲，这很好，但在你的情况下，myFunction总是不会返回任何东西。换句话说，你把它设置为空。
在myFunction内，您再次设置了myFunction。这让我觉得我们可以在没有innerHTML的情况下完成你想要的一切。
我使用myFunction而不是onclick。这应该具有相同的效果，但也可以在使用Tab键输入文本框时捕获。
我已将您的PHP，HTML和JavaScript分成3个不同的部分。我知道这似乎是浪费时间，但投入那么短的额外时间会让你的生活更加轻松。像这样的调试问题只需要一半的时间。我强烈建议您将来以这种方式编写项目。
我不确定你为什么要切换onfocus的显示，所以我只是linkContainer2总是display。如果有必要，您可以添加if语句。
我已经包含了一些您可能会觉得有用的额外JavaScript功能。我的= none函数替换了get，使您的代码更易于阅读。我还添加了document.getElementById和addEvent，这也可以让您的生活更轻松。

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

1 个答案: