我如何检索textarea的当前值？ [英] how can i retrieve a current value of textarea?
本文介绍了我如何检索textarea的当前值？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题：所以我通过以下方式提醒了 textarea 的值：
var source = document.getElementById（'source'）.value;
alert（source）;
但是警告 textarea 的值为这是在页面加载时。我想提醒 textarea 的当前值。我也尝试过
$ $ $ $ $ c $ $（form）。submit（function（）{
但是这也没有帮助我，所以我该如何做到这一点？
这是我的代码。
< html>
< head>
< title> Perl WEB< / title>
< script type =text / javascriptsrc =http://code.guru99.com/Perl1/codemirror.js>< / script>
< link rel =stylesheethref =http://code.guru99.com/Perl1/codemirror.csstype =text / cssmedia =screen/>
< script src =http://code.jquery.com/jquery-1.10.2.min.js>< / script>
< script type =text / javascriptsrc =http：// code.guru99.com/perl/perl.js\"></script>
< style>
.CodeMirror {
border：1px solid #eee;
}
.CodeMirror-scroll {
height：auto;
overflow-y：hidden;
overflow-x：auto;
}
< / style> ;
< script>
$（docum （）函数（）{
$（form）。submit（function（）{
alert（Submitted）;
}）;
}）;
< / script>
< script type =text / javascript>
函数execute（）{
p5pkg.CORE.print = function（List__）{
var i;
for（i = 0; i< List __。length; i ++）{
document.getElementById（'print-result'）。value + = p5str（List __ [i]）
}
返回true;
};
p5pkg.CORE.warn = function（List__）{
var i;
列表__。push（\\\
）;
for（i = 0; i< List __。length; i ++）{
document.getElementById（'log-result'）。value + = p5str（List __ [i]）;
}
返回true;
};
p5pkg [main] [v_ ^ O] =浏览器;
p5pkg [main] [Hash_INC] [Perlito5 / strict.pm] =Perlito5 / strict.pm;
p5pkg [main] [Hash_INC] [Perlito5 / warnings.pm] =Perlito5 / warnings.pm;
var source = document.getElementById（'source'）。value;
alert（source）;
var pos = 0;
var ast;
var match;
document.getElementById（'log-result'）。value =;
// document.getElementById（'js-result'）。value =;
document.getElementById（'print-result'）。value =;
try {
//编译
document.getElementById（'log-result'）。value + =Compiling.\\\
;
var start = new Date（）。getTime（）;
var js_source = p5pkg [Perlito5]。compile_p5_to_js（[source]）;
var end = new Date（）。getTime（）;
var time = end - start;
document.getElementById（'log-result'）。value + =编译时间：+ time +ms\\\
;
// document.getElementById（'js-result'）。value + = js_source +; \\\
;
//运行
start = new Date（）。getTime（）;
eval（js_source）;
end = new Date（）。getTime（）;
时间=结束 - 开始;
document.getElementById（'log-result'）。value + =运行时间：+ time +ms\\\
;
p5pkg.CORE.print（[\\\
Done.\\\
]）;
}
catch（err）{
document.getElementById（'log-result'）。value + =Error：\\\
;
document.getElementById（'log-result'）。value + = err +\\\
;
document.getElementById（'log-result'）。value + =Compilation aborted.\\\
;
}
}
< / script>
< / head>
< body>
< form>
< textarea id =sourcecols =70rows =10>
表示'h';
< / textarea>
< div class =hint>此代码是可编辑的。点击运行即可执行。< / div>
< input type =buttonvalue =Runonclick =execute（）/>< / br>
输出：< / br>
日志：< / br>
< script>
var editor = CodeMirror.fromTextArea（document.getElementById（source），{
lineNumbers：true，
indentUnit：4，
indentWithTabs：true，
enterMode ：保持，
tabMode：shift
}）;
< / script>
< / form>
< / body>
< / html>
那么我怎样才能得到 textarea ？请帮助我们。
解决方案
我对CodeMirror并不熟悉，但您在屏幕上看到的却不是您的原来的 #source 了。相反，CodeMirror创建了几个元素，并且隐藏了原始 textarea 。
当我查看文档，我发现这一点：
var source = editor.doc.getValue（）;
alert（source）;
或者，由于您构建了编辑器对象与 fromTextArea（）方法，您可以在读取之前更新 textarea 的值：
editor.save（）;
var source = document.getElementById（'source'）。value;
alert（source）;
还要注意Adam对提交表单所说的话。并且HTML中存在无效的< / br> 标签，正确的表单是< br /> 。
请访问 CodeMirror用户手册获取更多信息。
Problem : So I have alerted the value of textarea by:
var source = document.getElementById('source').value;
alert(source);
But the value of textarea is alerted as it was at the time of page load. And I want to alert current value of the textarea. I have also tried
$("form").submit(function(){
But that also haven't helped me. So how can I do this?
This is my code.
<html>
<head>
<title>Perl WEB</title>
<script type="text/javascript" src="http://code.guru99.com/Perl1/codemirror.js"></script>
<link rel="stylesheet" href="http://code.guru99.com/Perl1/codemirror.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.guru99.com/perl/perl.js"></script>
<style>
.CodeMirror {
border: 1px solid #eee;
}
.CodeMirror-scroll {
height: auto;
overflow-y: hidden;
overflow-x: auto;
}
</style>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
<script type="text/javascript">
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.CORE.warn = function(List__) {
var i;
List__.push("\n");
for (i = 0; i < List__.length; i++) {
document.getElementById('log-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 = document.getElementById('source').value;
alert(source);
var pos = 0;
var ast;
var match;
document.getElementById('log-result').value = "";
// document.getElementById('js-result').value = "";
document.getElementById('print-result').value = "";
try {
// compile
document.getElementById('log-result').value += "Compiling.\n";
var start = new Date().getTime();
var js_source = p5pkg["Perlito5"].compile_p5_to_js([source]);
var end = new Date().getTime();
var time = end - start;
document.getElementById('log-result').value += "Compilation time: " + time + "ms\n";
// document.getElementById('js-result').value += js_source + ";\n";
// run
start = new Date().getTime();
eval(js_source);
end = new Date().getTime();
time = end - start;
document.getElementById('log-result').value += "Running time: " + time + "ms\n";
p5pkg.CORE.print(["\nDone.\n"]);
}
catch(err) {
document.getElementById('log-result').value += "Error:\n";
document.getElementById('log-result').value += err + "\n";
document.getElementById('log-result').value += "Compilation aborted.\n";
}
}
</script>
</head>
<body>
<form>
<textarea id="source" cols="70" rows="10">
say 'h';
</textarea>
<div class="hint">This code is editable. Click Run to execute.</div>
<input type="button" value="Run" onclick="execute()"/></br>
Output:</br>
<textarea id="print-result" disabled="true" rows="10" cols="70"></textarea></br>
Log:</br>
<textarea id="log-result" disabled="true" cols="70"></textarea>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("source"), {
lineNumbers: true,
indentUnit: 4,
indentWithTabs: true,
enterMode: "keep",
tabMode: "shift"
});
</script>
</form>
</body>
</html>
So how can I get the current value of the textarea? Please help me guys.
解决方案
I'm not familiar with CodeMirror, but what you exactly see on the screen, is not your original #source anymore. Instead there are several elements created by CodeMirror, and the original textarea is hidden.
When I look at the documentation, I found this:
var source = editor.doc.getValue();
alert(source);
Or, since you've constructed the editor object with fromTextArea() method, you can update the value of the the textarea before reading it:
editor.save();
var source = document.getElementById('source').value;
alert(source);
Notice also what Adam has said about submitting the form. And there are invalid </br> tags in your HTML, the correct form is <br />.
Please visit at CodeMirror User Manual for the furher information.
这篇关于我如何检索textarea的当前值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
