使用on / off开关jQuery onClick一次

Question

我试图找出如何做某事但却无法找出正确的术语。

我想要做的是有一个文本框（#price），点击它后会打开一个pdf计算器，然后在完成后预填充文本框，或者然后允许用户输入金额。但是如果文本框是＆＃34; tabbed＆＃34;我也希望这个工作。也取而代之的是onClick。 （也许onBlur）基本上任何时候使用文本框我需要它像这样工作。但是如何让onClick知道何时可以输入金额或计算器是否需要打开？

还有什么让这个棘手的是我需要一个On / Off开关基本上是一个复选框，当选中它时允许弹出pdf计算器，当它没有被检查时它只是忽略它并允许价格仍然输入。 / p>

有没有人对如何实现这一目标有任何建议或指示？

Answer 1

将事件处理程序绑定到focus事件（blur用于控件失去焦点时）。

$("#price").on({
 "focus": eventHandler
})

然后在eventHandler()检查是否需要调用计算器，检查它是否已经打开：$("#calculatorDiv").is(":visible")，并检查您的复选框是否已经过检查＆＃39; ：$("#checkboxId").is(':checked')，依赖于打开它。

Answer 2

您正在寻找的事件是onFocus和onBlur。我会将一个函数绑定到onFocus事件，该事件首先检查相应的复选框是否具有“true”（或“checked”）值，然后如果确实如此则继续，如果不存在则继续。

如果我没有通过手机接听电话，我会在jsfiddle中为您创建一个示例。

Answer 3

1。一个文本框（#price），点击一次就会打开一个pdf计算器

使用jQuery＆＃39; click()处理程序或bind("click", ...)

var $price = $("#price");
$price.click(function() {
    $("#pdf_calculator").fadeIn();
});

2。但是，如果文本框是＆＃34; tabbed＆＃34;也是

使用focus事件来了解输入何时处于活动状态（即，已标记为＆＃34;标签为＆＃34; to）。或者，如果您想知道用户何时离开＆＃34;可以使用blur事件。输入字段。 （＆＃39;模糊＆＃39;与焦点＆＃39;相反）

$price.on("focus click", function() {
    $("#pdf_calculator").fadeIn();
});

3。但是如何让onClick知道何时可以输入金额或计算器是否需要打开？

抓取用户输入的金额，将其转换为数值，然后执行验证步骤。

$price.on("focus click", function() {
    // Do some validation checking on the amount entered.
    var enteredValue = parseFloat($price.val());
    if (!isNaN(enteredValue) && enteredValue > 0) {
        $("#pdf_calculator").fadeIn();
    }
});

4。什么也使这个棘手的是我需要一个On / Off开关基本上是一个复选框，当选中它时允许弹出pdf计算器，当它没有被检查时它只是忽略它并允许价格仍然输入。

只需检查是否使用jQuery＆＃39; is(":checked")选中了复选框，然后结合上述步骤，您的完整工作代码如下所示：

var $price = $("#price");

$price.on("focus click blur", function() {

    // your checkbox element
    var checkbox = $("#show_calculator");

    // Check if the checkbox is checked
    if (checkbox.is(":checked")) {

        // convert the entered string to a number
        // then validate it according to your needs
        var enteredValue = parseFloat($price.val());
        if (!isNaN(enteredValue) && enteredValue > 0) {

            // if all conditions are met, 
            // show the pdf calculator
            $("#pdf_calculator").fadeIn();
        }
    }
});

Click here to review a working jsfiddle of these ideas.

对于pdf表单（以及获取pdf表单的输入和输出值），没有直接的方法不会涉及到＆＃39;黑客＆＃39; （可能会或可能不会在不同的浏览器上工作）。如果pdf只有一个输入，那么你可以捕获表单弹出窗口上的键盘事件，并将它们发送回HTML表单（这是一个丑陋的黑客），但如果这是我的项目，我只会转换pdf功能到javascript，然后你就拥有了所需的所有自由，并且你的计算器与你的应用程序的其余部分100％兼容。

希望这有帮助！