Question

我正在尝试使用jQuery keyup函数检测按键，但它似乎在Firefox中不起作用。虽然它在Chrome，Edge，IE和Opera中都有效。

$(".textfield").contents().keyup(function(evnt) {
    document.getElementById("btn_save").style.opacity = "1";
    saved = false;
});

＆＃34; .textfield＆＃34;是designmode = 'on'的iframe所以我试图在可编辑的iframe中检测一个keyup。

这是我的iframe，没什么特别的：

<iframe class="textfield" name="textfield" frameBorder="0"></iframe>

编辑:(这是我的第一个网站之一，所以不要介意错误的代码）

HTML

<head>
    <title>Notepad - A minimalistic, free online text editor for your notes</title>

    <meta charset="utf-8"/>
    <meta name="description" content="Notepad is a free, minimalistic, online text editor for quickly writing down, saving and sharing your notes."/>

    <link type="text/css" rel="stylesheet" href="style.css"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="filesaver/filesaver.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Khula|Roboto|Open+Sans|Barrio|Cairo|Cantarell|Heebo|Lato|Open+Sans|PT+Sans" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

    <!-- Fonts -->
    <script>
        WebFont.load({
            google: {
                families: ['Cantarell', "Open Sans"]
            }
        });
    </script>
</head>

<body onload="enableEdit('dark'); handlePaste(); handleDrop(); retrieveNote(); createCookie();">

    <!-- Facebook & Twitter Share -->
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/nl_NL/sdk.js#xfbml=1&version=v2.9";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>

    <div id="social">
        <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" style="vertical-align:top;zoom:1;*display:inline">Share</a></div>

        <a class="twitter-share-button" href="https://twitter.com/intent/tweet"></a>
        <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>

    <!-- Page -->
    <div id="page">
        <!-- Textfield -->
        <iframe class="textfield" name="textfield" frameBorder="0"></iframe>

        <!-- Toolbar -->
        <div id="toolbar">
            <h1 class="button" id="btn_bold" onclick="bold();" onmouseenter="onMouseEnter('btn_bold');" onmouseleave="onMouseLeave('btn_bold');"><b>B</b></h1>
            <h1 class="button" id="btn_ita" onclick="italic();" onmouseenter="onMouseEnter('btn_ita');" onmouseleave="onMouseLeave('btn_ita');"><i>I</i></h1>
            <h1 class="button" id="btn_und" onclick="underline();" onmouseenter="onMouseEnter('btn_und');" onmouseleave="onMouseLeave('btn_und');"><u>U</u></h1>

            <img src="img/theme_dark.png" alt="Change theme" class="button theme" id="btn_theme" onclick="changeTheme();" onmouseenter="onMouseEnter('btn_theme');" onmouseleave="onMouseLeave('btn_theme')"; alt="Change theme." title="Theme"></img>  

            <img src="img/save.png" type="button" id="btn_save" value="submit" onclick="post();" class="button theme" alt="Save note." onmouseenter="onMouseEnter('btn_save');" onmouseleave="onMouseLeave('btn_save')" title="Save note"/>

            <img src="img/cloud.png" type="button" id="btn_down" onclick="download();" class="button theme" alt="Download note" onmouseenter="onMouseEnter('btn_down');" onmouseleave="onMouseLeave('btn_down')" title="Download note"/>

            <h1 class="button" id="btn_plus" onmousedown="changeFontSize(3);" onmouseenter="onMouseEnter('btn_plus');" onmouseleave="onMouseLeave('btn_plus');">+</h1>
            <h1 class="button" id="btn_minus" onmousedown="changeFontSize(-3);" onmouseenter="onMouseEnter('btn_minus');" onmouseleave="onMouseLeave('btn_minus');">-</h1>
        </div>

        <div id="result"></div>
    </div>

    <?php
        require("dbconnect.php");   

        $id = 0;
        $idvar = $_GET['id'];

        if ($idvar != null) {
            $sel = "SELECT text from content WHERE id = $idvar";
        } else {
            $sel = "SELECT text from content WHERE id = 0";
        }

        $result = mysqli_query($connection, $sel);

        if (mysqli_num_rows($result) == 1) {
            while ($r = mysqli_fetch_array($result)) {
                $content = str_replace('"', '&quot;', $r["text"]);
            }
        } else {
            header("Location: index.html");
        }

        $result = mysqli_query($connection, "SELECT id FROM content ORDER BY id DESC LIMIT 1;");
        if (mysqli_num_rows($result) > 0) {
            $lastid = mysqli_fetch_row($result);
        }
    ?>

    <div id="hid" style="display:none;" data-info="<?php echo $content; ?>"></div>

    <script type="text/javascript">
        function post() {
            if (!saved) {
                var content = getContent();         
                $.post("note.php", {posttext:content}, function (data) {});

                var lastid = "<?php echo $lastid[0]; ?>";

                if (content != "") {
                    increment++;
                    lastid = parseInt(lastid) + increment;
                    alert("Note saved at:\nnotepad.com/index.html?id=" + lastid);
                    document.getElementById("btn_save").style.opacity = "0.3";
                    document.getElementById("btn_save").title = "Saved at:\nnotepad.com/index.html?id=" + lastid;
                    saved = true;
                } else {
                    alert("Empty note");
                }
            }
        }
    </script>

    <script type="text/javascript" src="script.js"></script>

</body>

的JavaScript

var color_text;
var color_button_light;
var color_button_dark;
var color_background;
var color_hover;
var brightness;
var font_size = 32;
var saved = false;
var mouseObj;

function getContent() {
    return textfield.document.body.innerHTML;
}

var increment;

function download() {
    if (getContent() != "") {
        var blob = new Blob([getContent()], {type: "text/plain;charset=utf-8"});
        saveAs(blob, "note");
    } else {
        alert("Empty note");
    }
}

function retrieveNote() {
    var info = $("#hid").data("info");
    textfield.document.body.innerHTML = info;
}

$(".textfield").contents().keyup(function(evnt) {
    document.getElementById("btn_save").style.opacity = "1";
    saved = false;
});

function enableEdit(theme) {
    increment = 0;

    // Themes
    if (theme === 'dark') {
        color_text = "#757575";
        color_button_light = "#303030";
        color_button_dark = "#646464";
        color_hover = "#535353";
        brightness = 125;
        color_background = "#151515";

    } else if (theme === 'hacker') {
        color_text = "#00BB00";
        color_button_light = "#202020";
        color_button_dark = "#00BB00";
        color_hover = "#009900";
        brightness = 125;
        color_background = "#000000";

    } else if (theme === 'light') {
        color_text = "#999";
        color_button_light = "#BBBBBB";
        color_button_dark = "#757575";
        color_hover = "#646464";
        brightness = 90;
        color_background = "#EEEEEE";
    }

    // Background Color
    document.body.style.backgroundColor = color_background;
    document.getElementById("toolbar").backgroundColor = color_background;

    // Textfield
    textfield.document.designMode = 'on';

    var tag = "<link href='https://fonts.googleapis.com/css?family=Open+Sans|Heebo|Lato' rel='stylesheet'><style>body{font-family:consolas, heebo;}</style>"
    $(".textfield").contents().find("head").append(tag);

    textfield.document.body.style.fontSize = font_size + "px";  
    textfield.document.body.style.color = color_text;
    textfield.document.body.style.padding = "20px";
    textfield.document.body.style.tabSize = "4";
    textfield.document.body.style.whiteSpace = "pre-wrap";
    textfield.document.body.style.wordWrap = "break-word";
    textfield.document.body.style.lineHeight = "1.4";
    textfield.focus();

    // Buttons
    document.getElementById("btn_bold").style.color = color_button_light;
    document.getElementById("btn_ita").style.color = color_button_light;
    document.getElementById("btn_und").style.color = color_button_light;
    document.getElementById("btn_plus").style.color = color_button_dark;
    document.getElementById("btn_minus").style.color = color_button_dark;
}

function handlePaste() { 
    textfield.document.addEventListener("paste", function(evnt) {
        evnt.preventDefault();
        var text = evnt.clipboardData.getData("text/plain");

        document.getElementById("btn_save").style.opacity = "1";
        saved = false;

        textfield.document.execCommand("insertText", false, text);
    });
}

function handleDrop() {
    textfield.document.addEventListener("drop", function (evnt) {
        evnt.preventDefault();

        document.getElementById("btn_save").style.opacity = "1";
        saved = false;

        var text = evnt.dataTransfer.getData("text/plain");
        textfield.document.execCommand("insertText", false, text);
    });
}

var sources = ["theme_dark.png", "theme_light2.png", "theme_hacker.png"];
var sources2 = ["save_dark.png", "save.png", "save_hacker.png"];
var themes = ["dark", "light", "hacker"];
var iterator;

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function createCookie() {
    if (getCookie("theme") == "") {
        iterator = 0;
    } else {
        iterator = getCookie("theme");
    }

    document.getElementById('btn_theme').src = "img/" + sources[iterator];
    document.getElementById('btn_save').src = "img/" + sources2[iterator];
    enableEdit(themes[iterator]);
}

function changeTheme () {
    createCookie();

    if (iterator < sources.length-1) {
        iterator++;
    } else {
        iterator = 0;
    }

    document.cookie = "theme=" + iterator + ";expires=Date.getTime() + 60 * 60 * 24 * 365 * 10;";
    document.getElementById('btn_theme').src = "img/" + sources[iterator];
    document.getElementById('btn_save').src = "img/" + sources2[iterator];
    enableEdit(themes[iterator]);

    onMouseEnter('btn_theme');
}

function bold() {
    textfield.document.execCommand("bold", false, null);
}

function italic() {
    textfield.document.execCommand("italic", false, null);
}

function underline() {
    textfield.document.execCommand("underline", false, null);
}

function changeFontSize (amount) {
    font_size += amount;
    textfield.document.body.style.fontSize = font_size + "px";
}

function onMouseEnter(id) {
    mouseObj = id;

    if (mouseObj != 'btn_theme' && mouseObj != 'btn_save') {
        document.getElementById(mouseObj).style.color = color_hover;
    } else {
        document.getElementById(mouseObj).style.filter = "brightness(" + brightness + "%)";
    }
}

function onMouseLeave(id) {
    mouseObj = null;
}

setInterval(function() {
    var isBold = textfield.document.queryCommandState("Bold");
    var isItalic = textfield.document.queryCommandState("Italic");
    var isUnderlined = textfield.document.queryCommandState("Underline");

    if (isBold == true && mouseObj == null) {
        document.getElementById("btn_bold").style.color = color_button_dark;
    } else if (isBold == false && mouseObj == null) {
        document.getElementById("btn_bold").style.color = color_button_light;
    }

    if (isItalic == true && mouseObj == null) {
        document.getElementById("btn_ita").style.color = color_button_dark;
    } else if (isItalic == false && mouseObj == null) {
        document.getElementById("btn_ita").style.color = color_button_light;
    }

    if (isUnderlined == true && mouseObj == null) {
        document.getElementById("btn_und").style.color = color_button_dark;
    } else if (isUnderlined == false && mouseObj == null) {
        document.getElementById("btn_und").style.color = color_button_light;
    }

    if (mouseObj != 'btn_plus') {
        document.getElementById("btn_plus").style.color = color_button_dark;
    }

    if (mouseObj != 'btn_minus') {
        document.getElementById("btn_minus").style.color = color_button_dark;
    }

    if (mouseObj != 'btn_theme') {
        document.getElementById("btn_theme").style.filter = "brightness(100%)";
    }

    if (mouseObj != 'btn_save') {
        document.getElementById("btn_save").style.filter = "brightness(100%)";
    }
},10);

用于保存笔记的PHP

<?php
    require("dbconnect.php");

    if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL:" . mysqli_error();
    }

    if (isset($_POST["posttext"]) && !empty($_POST["posttext"])) {
        $content = $_POST['posttext'];
        $content = mysqli_real_escape_string($connection, $_POST["posttext"]);

        $insert = "INSERT INTO content (text) VALUES ('$content')";
        mysqli_query($connection, $insert);
        $id = mysqli_insert_id($connection);
    }

?>

Answer 1

你可以使用jquery ......

$(document).ready(function(){
   $(".textfield").keyup(function() {
     $("#btn_save").css("opacity", 1);
   });
});

Answer 2

好的，我解决了这个问题。显然，Firefox需要$(document).ready()来正确运行按键事件（还没有测试过其他事件）。

所以你的代码应该是：

$(document).ready(function(){
    $(".textfield").contents().keyup(function(evnt) {
        document.getElementById("btn_save").style.opacity = "1";
        saved = false;
    });
});

而不是：

$(".textfield").contents().keyup(function(evnt) {
    document.getElementById("btn_save").style.opacity = "1";
    saved = false;
});

正如我已经说过，这是一个仅在Firefox AFAIK中出现的问题。

在撰写此答案时，此代码适用于Chrome，Firefox，Opera，Edge和Internet Explorer。

Answer 3

我有类似的问题。移动键盘（在Firefox中）不会发出按键，按键按下和按键事件。因此，我遇到了Text Composition events。

类似这样的东西：

myInput = document.getElementById('myInput');    
myInput.addEventListener('compositionupdate', (event) => {
  setTimeout(() => {
    applyFilter(event)
  });
})

在调用我的函数之前，必须等待setTimeOut等待输入值收到键盘值。

密钥在Firefox中不起作用

3 个答案: