javascript - jQuery onClick 一次，带开/关开关

Question

我试图弄清楚如何做某事，但无法找出正确的术语。

我想做的是有一个文本框(#price)，单击一次就会打开一个 pdf 计算器，然后在完成后预填充文本框，或者允许用户输入金额。但是如果文本框被“选项卡”到也而不是 onClick，我也希望它能够工作。 (也许 onBlur)基本上任何时候使用文本框我都需要它像那样工作。但是如何让 onClick 知道何时可以输入金额或是否需要打开计算器？

这也很棘手，因为我需要一个开/关开关，基本上是一个复选框，当选中它时，它允许弹出 pdf 计算器，当它不选中时，它只是忽略它并允许仍然输入价格。

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

Answer 1

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

使用 jQuery 的 click() 处理程序或 bind("click", ...)

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

2。但我也希望如果文本框被“选项卡”到也可以工作

使用focus事件来了解输入何时处于事件状态(即已被“选项卡”切换)。或者，如果您想知道用户何时“离开”输入字段，则可以使用 blur 事件。 (“模糊”与“焦点”相反)

$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。这也很棘手的是，我需要一个开/关开关，基本上是一个复选框，当选中它时，它允许弹出 pdf 计算器，当它不选中时，它只是忽略它并允许仍然输入价格。

只需使用 jQuery 的 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 表单中再次输入和输出值)，没有一种不涉及“黑客”的直接方法(可能或可能无法在不同浏览器上运行)。如果 pdf 只有一个输入，那么您可以捕获表单弹出窗口上的键盘事件，并将它们发送回 HTML 表单(这是一个丑陋的黑客)，但如果这是我的项目，我只会转换 pdf 功能到 JavaScript，然后您就拥有所需的所有自由，并且您的计算器与应用程序的其余部分 100% 兼容。

希望这有帮助!