我如何检索textarea的当前值？
[英]how can i retrieve a current value of textarea?
问题描述
Problem : So I have alerted the value of textarea by: 
问题：所以我通过以下方式提醒了textarea的价值：
var source = document.getElementById('source').value;
alert(source);
But the value of textarea is alerted as it was at the time of page load. 但是textarea的值会在页面加载时被警告。 And I want to alert current value of the textarea . 我想提醒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 ? 那么如何获得textarea的当前值？ Please help me guys. 请帮帮我们。
5 个解决方案
解决方案1
1 已采纳 2013-07-08 11:26:06
I'm not familiar with CodeMirror, but what you exactly see on the screen, is not your original #source anymore. 我不熟悉CodeMirror，但是你在屏幕上看到的不再是原来的#source了。 Instead there are several elements created by CodeMirror, and the original textarea is hidden. 相反，CodeMirror创建了几个元素，并隐藏了原始textarea 。
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: 或者，由于您使用fromTextArea()方法构造了editor对象， fromTextArea()可以在读取之前更新textarea的值：
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 /> . HTML中有无效的</br>标签，正确的格式是<br /> 。
Please visit at CodeMirror User Manual for the furher information. 请访问CodeMirror用户手册以获取更多信息。
解决方案2
0 2013-07-08 10:06:15
As you have jQuery loaded you can do as follows: 在加载jQuery时，您可以执行以下操作：
var content = $('#source').val();
alert(content);
Of course, if you do it at page load, the textarea will be empty (or even uncreated). 当然，如果你在页面加载时这样做，textarea将是空的（甚至是未创建的）。 You could extract its content on form submit, as you seem to suggest. 您可以在表单提交中提取其内容，如您所示。
This code will create a button that will alert the content of your textarea when clicked: 此代码将创建一个按钮，在单击时将提醒您textarea的内容：
<button onclick="alert($('#source').val())">Click me</button>
解决方案3
0 2013-07-08 10:07:40
Try the following inside the submit() 在submit（）中尝试以下内容
var textAreaVal = $("#print-result").val();
alert(textAreaVal);
解决方案4
0 2013-07-08 10:09:12
if yout want the value to alert when the mouse leaves the textarea you could try to add onblur="myFunction()" to the input something like: (actually if you want it on mouse leave, you can add onmouseout="myFunction()") 如果你想要在鼠标离开textarea时警告值，你可以尝试将onblur =“myFunction（）”添加到输入中，例如:(实际上如果你想在鼠标离开时，你可以添加onmouseout =“myFunction（） “）
<textarea id="source" cols="70" rows="10" onblur="myFunction()">
say 'h';
</textarea>
<script type="text/javascript">
function myFunction() {
var source = document.getElementById('source').value;
alert(source);
}
</script>
解决方案5
0 2013-07-08 10:10:05
Your form does not get submitted when the button in it is pressed since this is not a submit button. 当按下按钮时，您的表单不会被提交，因为这不是提交按钮。
This will not submit the form, and will not alert its' contents. 这不会提交表格，也不会提醒其内容。
<input type="button" value="Run" onclick="execute()"/></br>
Add something like this in the form: 在表单中添加以下内容：
<input type="submit" value="Submit">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.