JavaScript onchange，onblur和Firefox中的焦点怪异 [英] JavaScript onchange, onblur, and focus weirdness in Firefox

问题描述

在我的表单中，我有一个折扣字段，接受从总帐单（PHP生成的HTML）中取出的美元金额：

  echo< input id = \discount \class = \text \type = \text \name = \\discount \onkeypress = \ return currency（this，event）\onchange = \currency_format（this）\onfocus = \on_focus（this）\onblur = \on_blur（this）; calculate_bill（）\ /><峰; br /><峰; br /> \\\
; 
  

JavaScript函数 calculate_bill 只要折扣金额小于总帐单，即可取消折扣金额：

$ pre $如果（折扣！=''） {

if（discount - 0.01> total_bill）{
window.alert（'折扣不能大于总帐单'）;
document.form.discount.focus（）;
}

else {
total_bill - = discount;
}

}

问题在于，折扣比总票据重点没有被返还到折扣字段。我已经尝试使用 onchange 调用 calculate_bill 函数，但是当我做的时候IE和Firefox都不会把焦点返回到折扣字段就像那样当我使用 onblur 调用 calculate_bill 时，它在IE中工作，但在Firefox中仍然不起作用。我试图使用确认框，而不是一个警告框，但也没有工作（加上我不想两个按钮，我只有一个确定按钮）。

在折扣金额大于总帐单的情况下，如果用户点击另一个字段或选项卡，用户离开该字段后，如何确保焦点返回到折扣字段？ 您可能想尝试下面描述的技术： Javascript / Firefox / onBlur

我自己并没有尝试过，但基本上建议将 document.form.discount.focus（） with

  setTimeout（function（）{document.form .discount.focus（）;}，1）; 
  

我怀疑底层的问题是，当你点击tab（例如）时，浏览器会经历一个几个步骤：调用与当前控件（onchange，onblur）相关的代码，然后将焦点设置到新控件。所以如果你在第一步改变焦点，那么下一步焦点将会立即被重置。因此，基于计时器的解决方法。

On my form I have a discount field that accepts a dollar amount to be taken off of the total bill (HTML generated in PHP):

echo "<input id=\"discount\" class=\"text\" type=\"text\" name=\"discount\" onkeypress=\"return currency(this, event)\" onchange=\"currency_format(this)\" onfocus=\"on_focus(this)\" onblur=\"on_blur(this); calculate_bill()\"/><br/><br/>\n";

The JavaScript function calculate_bill calculates the bill and takes off the discount amount as long as the discount amount is less than the total bill:

    if(discount != ''){

        if(discount - 0.01 > total_bill){
            window.alert('Discount Cannot Be Greater Than Total Bill');
            document.form.discount.focus();
        }

        else{
            total_bill -= discount;
        }

    }

The problem is that even that when the discount is more than the total bill focus is not being returned to the discount field. I have tried calling the calculate_bill function with onchange but neither IE or Firefox will return focus to the discount field when I do it like that. When I call calculate_bill with onblur it works in IE, but still does not work in Firefox. I have attempted to use a confirmation box instead of an alert box as well, but that didn't work either (plus I don't want two buttons, I only an "OK" button).

How can I ensure focus is returned to the discount field after a user has left that field by clicking on another field or tabbing IF the discount amount is larger than the total bill?

解决方案

You might want to try the technique described here: Javascript / Firefox / onBlur

I haven't tried it myself, but essentially it suggests to replace document.form.discount.focus() with

setTimeout(function() {document.form.discount.focus();}, 1);

I suspect the underlying problem is that when you hit tab (for example), the browser goes through a few steps: call the code assosiated with the current control (onchange, onblur), then set the focus to the new control. So if you change focus in the first step, then the focus will still get reset immediately in the next step. Hence the timer-based workaround.

这篇关于JavaScript onchange，onblur和Firefox中的焦点怪异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！