0

我将如何创建一个在线编辑器，如W3School 的自己尝试编辑器？

我已经尝试过使用 JQuery 的keyup(); 功能，但我似乎无法让它工作。这是我到目前为止所拥有的：

<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script type="text/javascript">
$("#idinput").keyup( function() {
$("#idoutput").html($("#idinput").val());
} );
</script>
</head>
<body>


<textarea id="idinput"></textarea>
<br>
<div id="idoutput"></div>
</body>
</html>

如果我犯了一些简单的错误，请告诉我。我对 JQuery 很陌生，这是迄今为止我用它写的最复杂的东西。

我意识到这可能以前曾被问过，但其他解决方案都没有奏效。提前致谢。

4

3 回答 3

3

您的脚本在 甚至存在之前textarea执行div。尝试使用以下代码包装您的代码，以延迟执行，直到文档准备好。

$(document).ready(function() {
  // Your code here.
});
于 2013-04-28T21:05:24.000 回答
0 
<script type="text/javascript">
$(document).ready(function() {
   $("#idinput").keyup( function() {
   $("#idoutput").html($("#idinput").val());
} );
});
</script>
于 2013-04-28T21:04:53.497 回答
0

浏览器从上到下获取 HTML 文件。您在 HTML 元素<textarea>和<div>.

JavaScript 代码在加载时直接解释和执行（除非它位于函数内部）。因此，当您的页面仍在加载时，JavaScript 已经运行，因此它不会找到您的 HTML 元素。

您应该将现有代码包装到$(document).ready(function(){ ... })（使用 JQuery）或window.onload = function(){ ... }（JQuery 函数以更简洁的方式执行的操作）中。这些函数中的代码在页面完全加载时执行，因此您的元素将被加载并可用。

于 2013-04-28T21:22:50.997 回答