Javascript 如何检索textarea的当前值?
问题:因此我通过以下方式警告了Javascript 如何检索textarea的当前值?,javascript,html,codemirror,Javascript,Html,Codemirror,问题:因此我通过以下方式警告了textarea的值: var source = document.getElementById('source').value; alert(source); 但是textarea的值会像页面加载时一样发出警报。我想提醒textarea的当前值。我也试过了 $("form").submit(function(){ 但这对我也没有帮助。那我该怎么做呢 这是我的密码 <html> <head> <
textarea
的值:
var source = document.getElementById('source').value;
alert(source);
但是textarea
的值会像页面加载时一样发出警报。我想提醒textarea
的当前值。我也试过了
$("form").submit(function(){
但这对我也没有帮助。那我该怎么做呢
这是我的密码
<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>
PerlWeb
.CodeMirror{
边框:1px实心#eee;
}
.CodeMirror滚动条{
高度:自动;
溢出y:隐藏;
溢出-x:自动;
}
$(文档).ready(函数(){
$(“表格”)。提交(函数(){
警报(“已提交”);
});
});
函数execute(){
p5pkg.CORE.print=函数(列表){
var i;
对于(i=0;i<列表长度;i++){
document.getElementById('print-result')。value+=p5str(List\uui])
}
返回true;
};
p5pkg.CORE.warn=函数(列表){
var i;
列表推送(“\n”);
对于(i=0;i<列表长度;i++){
document.getElementById('log-result')。value+=p5str(List_i[i]);
}
返回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')。值;
警报(来源);
var-pos=0;
var-ast;
var匹配;
document.getElementById('log-result')。value=“”;
//document.getElementById('js-result')。value=“”;
document.getElementById('print-result')。value=“”;
试一试{
//编撰
document.getElementById('log-result')。值+=“正在编译。\n”;
var start=new Date().getTime();
var js_source=p5pkg[“Perlito5”]。将_p5_编译为_js([source]);
var end=new Date().getTime();
var时间=结束-开始;
document.getElementById('log-result')。值+=“编译时间:”+time+“ms\n”;
//document.getElementById('js-result')。value+=js_source+“;\n”;
//跑
开始=新日期().getTime();
评估(js_来源);
end=新日期().getTime();
时间=结束-开始;
document.getElementById('log-result')。值+=“运行时间:”+time+“ms\n”;
p5pkg.CORE.print([“\n完成。\n”]);
}
捕捉(错误){
document.getElementById('log-result')。值+=“错误:\n”;
document.getElementById('log-result')。value+=err+“\n”;
document.getElementById('log-result')。value+=“编译已中止。\n”;
}
}
说“h”;
此代码是可编辑的。单击运行以执行。
输出:
日志:
var editor=CodeMirror.fromTextArea(document.getElementById(“源”){
行号:对,
单位:4,
indentWithTabs:true,
进入模式:“保持”,
tabMode:“移位”
});
那么如何获取
textarea
的当前值呢?伙计们,请帮帮我。既然已经加载了jQuery,您可以执行以下操作:
var content = $('#source').val();
alert(content);
当然,如果在页面加载时这样做,文本区域将是空的(甚至是未创建的)。正如您所建议的,您可以在表单提交中提取其内容
此代码将创建一个按钮,当单击时,该按钮将提示文本区域的内容:
<button onclick="alert($('#source').val())">Click me</button>
点击我
在submit()中尝试以下操作
如果希望鼠标离开文本区域时该值发出警报,可以尝试向输入中添加onblur=“myFunction()”,例如:(实际上,如果希望鼠标离开,可以添加onmouseout=“myFunction()”)
说“h”;
函数myFunction(){
var source=document.getElementById('source')。值;
警报(来源);
}
当按下表单中的按钮时,表单不会被提交,因为这不是提交按钮
这将不会提交表单,也不会提醒其“内容”
<input type="button" value="Run" onclick="execute()"/></br>
在表单中添加如下内容:
<input type="submit" value="Submit">
我不熟悉CodeMirror,但你在屏幕上看到的,不再是你原来的
#源代码。相反,CodeMirror创建了几个元素,原始的textarea
被隐藏
当我查看文档时,我发现:
var source = editor.doc.getValue();
alert(source);
或者,由于您已经使用fromTextArea()
方法构建了编辑器
对象,所以可以在读取textarea
之前更新其值:
editor.save();
var source = document.getElementById('source').value;
alert(source);
请注意Adam关于提交表单的内容。并且HTML中存在无效的
标记,正确的格式是
有关更多信息,请访问。将textarea的值存储在变量中,然后向其发出警报。那么,您希望该值确切显示在什么时候?您必须稍后执行。例如,在用户更改值后,作为对用户交互的响应。“如何”做到这一点取决于你到底想要什么。这并不能真正回答问题。谁在这个答案上投了赞成票?警报的内容仍然是原始值,而不是用户输入的值。我没有正确理解问题@蒂姆:我对你的答案投了赞成票,让它上升,请随意对我的答案投反对票。@thibauts好吧,这个问题措辞很糟糕。。。谢谢你的投票。我也不会否决你的答案,尽管Felix的评论仍然有效:)。尽管你说得对,但单击按钮执行execute()
,
var source = editor.doc.getValue();
alert(source);
editor.save();
var source = document.getElementById('source').value;
alert(source);