1. 首頁
  2. 問答
  3. Keyup在Firefox中不工作

Keyup在Firefox中不工作

2017-05-29 108 views
0

我試圖檢測使用jQuery的keyup功能的按鍵，但它似乎並沒有在Firefox中工作。雖然它可以在Chrome，Edge，IE和Opera中運行。Keyup在Firefox中不工作

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

「.textfield」是designmode = 'on'所以我想一個可編輯的iframe中檢測KEYUP一個iframe。

這裏是我的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); 
    } 

?>

來源

2017-05-29 Alex Lushiku

+0

你的瀏覽器控制檯對錯誤有什麼看法？ – Jer

+0

如果你使用$（「。textfield」）。keyup（函數 – tech2017

+0

使用'$（document）.on（「keyup」，「selector」，function（e）{...' – deblocker

回答

0

好吧，我解決了這一問題。顯然，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。

來源

2017-05-29 15:14:44

0

你可以使用jQuery ...

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

來源

2017-05-29 12:54:10

+0

我已經使用jQuery 。這段代碼雖然不起作用，但是謝謝你的迴應。 –

+0

你能給出完整的源代碼嗎？是在i幀下的btn_save –

+0

它位於工具欄的側面，它只是主體的一部分（不是一個在iframe中） –

相關問題

 相關問題