title: Keyup in Firefox
body: <p>I am trying to detect a keypress using the jQuery keyup function, but it does not seem to work in Firefox. Though it does work in Chrome, Edge, IE and Opera.</p>
  
  <pre><code>$(".textfield").contents().keyup(function(evnt) {
      document.getElementById("btn_save").style.opacity = "1";
      saved = false;
  });
  </code></pre>
  
  <p>".textfield" is an iframe with <code>designmode = 'on'</code> So I'm trying to detect a keyup within a editable iframe.</p>
  
  <p>Here's my iframe, nothing special:</p>
  
  <pre><code>&lt;iframe class="textfield" name="textfield" frameBorder="0"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>EDIT: (It's one of my first websites, so don't mind the bad code)</p>
  
  <p>HTML
  </p>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Notepad - A minimalistic, free online text editor for your notes&lt;/title&gt;
  
      &lt;meta charset="utf-8"/&gt;
      &lt;meta name="description" content="Notepad is a free, minimalistic, online text editor for quickly writing down, saving and sharing your notes."/&gt;
  
      &lt;link type="text/css" rel="stylesheet" href="style.css"/&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="filesaver/filesaver.js"&gt;&lt;/script&gt;
  
      &lt;link href="https://fonts.googleapis.com/css?family=Khula|Roboto|Open+Sans|Barrio|Cairo|Cantarell|Heebo|Lato|Open+Sans|PT+Sans" rel="stylesheet"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"&gt;&lt;/script&gt;
  
      &lt;!-- Fonts --&gt;
      &lt;script&gt;
          WebFont.load({
              google: {
                  families: ['Cantarell', "Open Sans"]
              }
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="enableEdit('dark'); handlePaste(); handleDrop(); retrieveNote(); createCookie();"&gt;
  
      &lt;!-- Facebook &amp; Twitter Share --&gt;
      &lt;div id="fb-root"&gt;&lt;/div&gt;
      &lt;script&gt;(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&amp;version=v2.9";
              fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));
      &lt;/script&gt;
  
      &lt;div id="social"&gt;
          &lt;div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small" data-mobile-iframe="true"&gt;&lt;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;amp;src=sdkpreparse" style="vertical-align:top;zoom:1;*display:inline"&gt;Share&lt;/a&gt;&lt;/div&gt;
  
          &lt;a class="twitter-share-button" href="https://twitter.com/intent/tweet"&gt;&lt;/a&gt;
          &lt;script async src="//platform.twitter.com/widgets.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;/div&gt;
  
      &lt;!-- Page --&gt;
      &lt;div id="page"&gt;
          &lt;!-- Textfield --&gt;
          &lt;iframe class="textfield" name="textfield" frameBorder="0"&gt;&lt;/iframe&gt;
  
          &lt;!-- Toolbar --&gt;
          &lt;div id="toolbar"&gt;
              &lt;h1 class="button" id="btn_bold" onclick="bold();" onmouseenter="onMouseEnter('btn_bold');" onmouseleave="onMouseLeave('btn_bold');"&gt;&lt;b&gt;B&lt;/b&gt;&lt;/h1&gt;
              &lt;h1 class="button" id="btn_ita" onclick="italic();" onmouseenter="onMouseEnter('btn_ita');" onmouseleave="onMouseLeave('btn_ita');"&gt;&lt;i&gt;I&lt;/i&gt;&lt;/h1&gt;
              &lt;h1 class="button" id="btn_und" onclick="underline();" onmouseenter="onMouseEnter('btn_und');" onmouseleave="onMouseLeave('btn_und');"&gt;&lt;u&gt;U&lt;/u&gt;&lt;/h1&gt;
  
              &lt;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"&gt;&lt;/img&gt;  
  
              &lt;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"/&gt;
  
              &lt;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"/&gt;
  
              &lt;h1 class="button" id="btn_plus" onmousedown="changeFontSize(3);" onmouseenter="onMouseEnter('btn_plus');" onmouseleave="onMouseLeave('btn_plus');"&gt;+&lt;/h1&gt;
              &lt;h1 class="button" id="btn_minus" onmousedown="changeFontSize(-3);" onmouseenter="onMouseEnter('btn_minus');" onmouseleave="onMouseLeave('btn_minus');"&gt;-&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div id="result"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;?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('"', '&amp;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) &gt; 0) {
              $lastid = mysqli_fetch_row($result);
          }
      ?&gt;
  
      &lt;div id="hid" style="display:none;" data-info="&lt;?php echo $content; ?&gt;"&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          function post() {
              if (!saved) {
                  var content = getContent();         
                  $.post("note.php", {posttext:content}, function (data) {});
  
                  var lastid = "&lt;?php echo $lastid[0]; ?&gt;";
  
                  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");
                  }
              }
          }
      &lt;/script&gt;
  
      &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>JavaScript</p>
  
  <pre><code>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 = "&lt;link href='https://fonts.googleapis.com/css?family=Open+Sans|Heebo|Lato' rel='stylesheet'&gt;&lt;style&gt;body{font-family:consolas, heebo;}&lt;/style&gt;"
      $(".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 &lt; 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 &lt; 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' &amp;&amp; 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 &amp;&amp; mouseObj == null) {
          document.getElementById("btn_bold").style.color = color_button_dark;
      } else if (isBold == false &amp;&amp; mouseObj == null) {
          document.getElementById("btn_bold").style.color = color_button_light;
      }
  
      if (isItalic == true &amp;&amp; mouseObj == null) {
          document.getElementById("btn_ita").style.color = color_button_dark;
      } else if (isItalic == false &amp;&amp; mouseObj == null) {
          document.getElementById("btn_ita").style.color = color_button_light;
      }
  
      if (isUnderlined == true &amp;&amp; mouseObj == null) {
          document.getElementById("btn_und").style.color = color_button_dark;
      } else if (isUnderlined == false &amp;&amp; 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);
  </code></pre>
  
  <p>PHP for saving the note</p>
  
  <pre><code>&lt;?php
      require("dbconnect.php");
  
      if (mysqli_connect_errno()) {
          echo "Failed to connect to MySQL:" . mysqli_error();
      }
  
      if (isset($_POST["posttext"]) &amp;&amp; !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);
      }
  
  ?&gt;
  </code></pre>