我有两个文件 1)index.php 和 2)代码.js
现在index.php中的代码如下
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link href="http://web.guru99.com/lib/codemirror.css" rel="stylesheet" />
<script type="text/javascript" src="code.js"></script>
<style type="text/css">
.CodeMirror {
border: 1px solid #eee;
height: auto;
}
.CodeMirror-scroll {
height: auto;
overflow-y: hidden;
overflow-x: auto;
}
</style>
</head>
<body>
Integer : whole numbers e.g. -3, 0, 69. The maximum value of an integer is platform-dependent. On a 32 bit machine, its usually around 2 billion. 64 bit machines usually have larger values. The constant PHP_INT_MAX is used to determine the maximum value.
<pre class="codeguru">say 'hi';</pre>
Let us now look at how PHP determines the data type depending on the attributes of the supplied data.
<pre class="codeguru">say 'hello';</pre>
Floating point numbers
<pre class="codeguru">say 'you r amazing';</pre>
Character strings
<pre class="codeguru">say 'i am fine';</pre>
</div>
<form class="hidden code-box" method="GET" name="sample">
<div dir="ltr"><textarea class="php" name="codeguru"></textarea></div>
<input type="submit" value="Run" onclick="execute();"/>
</br></br>
Output:</br></br>
<textarea id="print-result" disabled="true" cols="77"></textarea></br>
</form></div>
</body>
</html>
code.js 文件包含的代码如下
$(document).ready(function()
{
$('pre.codeguru').each(function()
{
var pre = this;
var form = $('form[name=sample]').clone();
$(form).removeAttr('name');
$(form).removeClass('hidden');
$($(form).find('textarea')[0]).val($(pre).text());
var id = $(pre).attr('id');
$(form).find('div textarea[name=code]').first().attr('id', id);
$(pre).replaceWith(form);
});
window.editors = [];
$('textarea[name=codeguru]').each(function()
{
window.editor = CodeMirror.fromTextArea(this,
{
lineNumbers: true,
matchBrackets: true,
mode: "application/x-httpd-perl",
tabMode: "shift"
});
editors.push(editor);
});
});
function execute() {
p5pkg.CORE.print = function(List__) {
var i;
for (i = 0; i < List__.length; i++) {
document.getElementById('print-result').value += p5str(List__[i])
}
return true;
};
p5pkg["main"]["v_^O"] = "browser";
p5pkg["main"]["Hash_INC"]["Perlito5/strict.pm"] = "Perlito5/strict.pm";
p5pkg["main"]["Hash_INC"]["Perlito5/warnings.pm"] = "Perlito5/warnings.pm";
var source = editor.getValue();
alert(source);
var pos = 0;
var ast;
var match;
document.getElementById('print-result').value = "";
try {
var start = new Date().getTime();
var js_source = p5pkg["Perlito5"].compile_p5_to_js([source]);
var end = new Date().getTime();
var time = end - start;
// run
start = new Date().getTime();
eval(js_source);
end = new Date().getTime();
time = end - start;
}
catch(err) {
//document.getElementById('log-result').value += "Error:\n";
}
}
我的代码中一切都运行良好。在code.js中，pre标签被textarea替换，并且应该运行textarea中的代码，因为该项目是在线perl编辑器。所以现在我的问题是我通过这段代码警告文本区域的值
var source = editor.getValue();
alert(source);
但这会弹出空白。那么我必须做什么才能检索文本区域的当前值？
最佳答案
您在此代码中创建了多个编辑器。这些似乎存储在 editors 数组中。现在您想通过单击按钮来执行 execute()，但您没有告诉 JS，您想要提醒哪个编辑器值。
页面上第一个编辑器的值可以这样获取:
var source = editors[0].getValue();
editor.getValue() 应该为您提供 editors 数组中最后一个编辑器的值。
由于每个编辑器都有一个单独的按钮，因此您可以将 editors 数组中的编辑器索引传递给 execute() 函数。
首先，从按钮输入中删除 onclick 属性，然后:
在$('pre.codeguru').each();之后，将事件监听器附加到按钮:
var n = 0;
$('input[type=button]').each(function () {
$(this).click(function (x) {
return function () {
execute(x);
};
}(n++))
}
);
在execute()中:
function execute(idx) {
...
var source = editors[idx].getValue();
alert(source);
....
}
更新
更新了 fiddle 代码以输出到相应的字段。
关于javascript - 如何获取文本区域的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17545219/