|
|
| 关键字 |
简介 |
示例代码 |
onfocus
onblur
|
焦点事件
|
示例代码
|
onmousedown
onmouseup
onmousemove
onmouseout
|
鼠标事件
|
示例代码
|
onkeydown
onkeypress
onkeyup
|
键盘事件
|
示例代码
|
onclick
ondbclick
|
点击事件
|
示例代码
|
|
onchange
|
变化事件
|
示例代码
|
|
onsubmit
|
提交事件
|
示例代码
|
|
onload
|
加载事件
|
示例代码
|
|
this
|
当前组件
|
示例代码
|
|
return false
|
阻止事件的发生
|
示例代码
|
|
练习-下拉菜单
|
示例代码
|
|
答案-下拉菜单
|
示例代码
|
|
|
练习-验证账号是否已经存在
|
示例代码
|
|
|
答案-验证账号是否已经存在
|
示例代码
|
|
|
练习-选中所有的checkbox
|
示例代码
|
|
|
答案-选中所有的checkbox
|
示例代码
|
示例
1
:
焦点事件
示例
2
:
鼠标事件
示例
3
:
键盘事件
示例
4
:
点击事件
示例
5
:
变化事件
示例
6
:
提交事件
示例
7
:
加载事件
示例
8
:
当前组件
示例
9
:
阻止事件的发生
示例
10
:
练习-下拉菜单
示例
11
:
答案-下拉菜单
示例
12
:
练习-验证账号是否已经存在
示例
13
:
答案-验证账号是否已经存在
示例
14
:
练习-选中所有的checkbox
示例
15
:
答案-选中所有的checkbox
焦点相关的事件，分别有获取焦点和失去焦点
当组件获取焦点的时候，会触发onfocus事件
当组件失去焦点的时候，会触发onblur事件
");
window.frames["iframe_show1189"].document.write(decodeHtml($("textarea#stepcodeTextarea1189").val()));
window.frames["iframe_show1189"].document.close();
$(window.frames["iframe_show1189"]).load(function(){
$("#iframe_show1189").height($("#iframe_show1189").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1189").height($("#iframe_show1189").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<input type="text" onfocus="f()" onblur="b()" id="input1" placeHolder="输入框1" >
<br>
<br>
<input type="text" id="input2" placeHolder="输入框2">
<br>
<br>
<div id="message"></div>
<script>
function f(){
document.getElementById("message").innerHTML="输入框1获取了焦点";
}
function b(){
document.getElementById("message").innerHTML="输入框1丢失了焦点";
}
</script>
<input type="text" onfocus="f()" onblur="b()" id="input1" placeHolder="输入框1" >
<br>
<br>
<input type="text" id="input2" placeHolder="输入框2">
<br>
<br>
<div id="message"></div>
<script>
function f(){
document.getElementById("message").innerHTML="输入框1获取了焦点";
}
function b(){
document.getElementById("message").innerHTML="输入框1丢失了焦点";
}
</script>
");
window.frames["iframe1189"].document.write(decodeHtml(code1189));
window.frames["iframe1189"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1189"]).load(function(){
$("#iframe1189").height($("#iframe1189").contents().find("body").height()+showittryitheight);
});
$("#iframe1189").height($("#iframe1189").contents().find("body").height()+showittryitheight);
alreadyWriteCode1189 = code1189;
$("#rendering1189").hide();
$("#rendered1189").show();
}
var tRereshRetry2DemoPanel1189 = setInterval(rereshRetry2DemoPanel1189,1000);
var binded1189 = false;
$("textarea#stepcodeTextarea1189").keyup(function(){
if(!binded1189){
$(window).bind('beforeunload',function(){
binded1189 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1189 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1189!=newCode){
// window.frames["iframe1189"].document.write("
");
// window.frames["iframe1189"].document.write(decodeHtml($("textarea#stepcodeTextarea1189").val()));
// window.frames["iframe1189"].document.close();
// $(window.frames["iframe1189"]).load(function(){
// $("#iframe1189").height($("#iframe1189").contents().find("body").height()+showittryitheight);
// });
// code1189 = newCode;
// }
});
$(".tryButton1189").click(function(){
$("#tryDiv1189").show();
$("#stepcodeTextarea1189").focus();
$("#stepcodeTextarea1189").height(200);
$("#iframe1189").height(0);
window.frames["iframe1189"].document.write("
");
window.frames["iframe1189"].document.write(decodeHtml($("textarea#stepcodeTextarea1189").val()));
window.frames["iframe1189"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1189"]).load(function(){
$("#iframe1189").height($("#iframe1189").contents().find("body").height()+showittryitheight);
});
$("#iframe1189").height($("#iframe1189").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1189.focus();
editor1189.setSize(null, "250");
$("#rendering1189").hide();
$("#rendered1189").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1189 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1189"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1189.on("change",function(doc){
if(!binded1189){
$(window).bind('beforeunload',function(){
binded1189 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1189 = newCode;
$("textarea#stepcodeTextarea1189").val(newCode);
if(alreadyWriteCode1189!=code1189){
lastModifedTime1189 = new Date().getTime();
$("#rendering1189").show();
$("#rendered1189").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1189 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1189.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1189").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
鼠标事件，由鼠标按下，鼠标弹起，鼠标经过，鼠标进入，鼠标退出几个事件组成
当在组件上鼠标按下的时候，会触发onmousedown事件
当在组件上鼠标弹起的时候，会触发onmouseup事件
当在组件上鼠标经过的时候，会触发onmousemove事件
当在组件上鼠标进入的时候，会触发onmouseover事件
当在组件上鼠标退出的时候，会触发onmouseout事件
注: 当鼠标进入一个组件的时候，onmousemove和onmouseover都会被触发，区别在于无论鼠标在组件上如何移动，onmouseover只会触发一次，onmousemove每次移动都会触发
");
window.frames["iframe_show1190"].document.write(decodeHtml($("textarea#stepcodeTextarea1190").val()));
window.frames["iframe_show1190"].document.close();
$(window.frames["iframe_show1190"]).load(function(){
$("#iframe_show1190").height($("#iframe_show1190").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1190").height($("#iframe_show1190").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<input type="button" onmousedown="down()" onmouseup="up()" value="用于演示按下和弹起" >
<br>
<br>
<input type="button" onmousemove="move()" value="用于演示鼠标经过" >
<br>
<br>
<input type="button" onmouseover="over()" value="用于演示鼠标进入" >
<br>
<br>
<input type="button" onmouseout="out()" value="用于演示鼠标退出" >
<br>
<br>
<div id="message"></div>
<script>
var number = 0;
function down(){
document.getElementById("message").innerHTML="按下了鼠标";
}
function up(){
document.getElementById("message").innerHTML="弹起了鼠标";
}
function move(){
document.getElementById("message").innerHTML="鼠标经过次数:"+(++number);
}
function over(){
document.getElementById("message").innerHTML="鼠标进入次数:"+(++number);
}
function out(){
document.getElementById("message").innerHTML="鼠标退出";
number = 0;
}
</script>
<input type="button" onmousedown="down()" onmouseup="up()" value="用于演示按下和弹起" >
<br>
<br>
<input type="button" onmousemove="move()" value="用于演示鼠标经过" >
<br>
<br>
<input type="button" onmouseover="over()" value="用于演示鼠标进入" >
<br>
<br>
<input type="button" onmouseout="out()" value="用于演示鼠标退出" >
<br>
<br>
<div id="message"></div>
<script>
var number = 0;
function down(){
document.getElementById("message").innerHTML="按下了鼠标";
}
function up(){
document.getElementById("message").innerHTML="弹起了鼠标";
}
function move(){
document.getElementById("message").innerHTML="鼠标经过次数:"+(++number);
}
function over(){
document.getElementById("message").innerHTML="鼠标进入次数:"+(++number);
}
function out(){
document.getElementById("message").innerHTML="鼠标退出";
number = 0;
}
</script>
");
window.frames["iframe1190"].document.write(decodeHtml(code1190));
window.frames["iframe1190"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1190"]).load(function(){
$("#iframe1190").height($("#iframe1190").contents().find("body").height()+showittryitheight);
});
$("#iframe1190").height($("#iframe1190").contents().find("body").height()+showittryitheight);
alreadyWriteCode1190 = code1190;
$("#rendering1190").hide();
$("#rendered1190").show();
}
var tRereshRetry2DemoPanel1190 = setInterval(rereshRetry2DemoPanel1190,1000);
var binded1190 = false;
$("textarea#stepcodeTextarea1190").keyup(function(){
if(!binded1190){
$(window).bind('beforeunload',function(){
binded1190 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1190 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1190!=newCode){
// window.frames["iframe1190"].document.write("
");
// window.frames["iframe1190"].document.write(decodeHtml($("textarea#stepcodeTextarea1190").val()));
// window.frames["iframe1190"].document.close();
// $(window.frames["iframe1190"]).load(function(){
// $("#iframe1190").height($("#iframe1190").contents().find("body").height()+showittryitheight);
// });
// code1190 = newCode;
// }
});
$(".tryButton1190").click(function(){
$("#tryDiv1190").show();
$("#stepcodeTextarea1190").focus();
$("#stepcodeTextarea1190").height(200);
$("#iframe1190").height(0);
window.frames["iframe1190"].document.write("
");
window.frames["iframe1190"].document.write(decodeHtml($("textarea#stepcodeTextarea1190").val()));
window.frames["iframe1190"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1190"]).load(function(){
$("#iframe1190").height($("#iframe1190").contents().find("body").height()+showittryitheight);
});
$("#iframe1190").height($("#iframe1190").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1190.focus();
editor1190.setSize(null, "250");
$("#rendering1190").hide();
$("#rendered1190").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1190 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1190"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1190.on("change",function(doc){
if(!binded1190){
$(window).bind('beforeunload',function(){
binded1190 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1190 = newCode;
$("textarea#stepcodeTextarea1190").val(newCode);
if(alreadyWriteCode1190!=code1190){
lastModifedTime1190 = new Date().getTime();
$("#rendering1190").show();
$("#rendered1190").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1190 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1190.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1190").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
键盘事件，由键盘按下keydown，键盘按下keypress,键盘弹起几个事件组成
当在组件上键盘按下的时候，会触发onkeydown事件
当在组件上键盘按下的时候，也会触发onkeypress事件
当在组件上键盘弹起的时候，会触发onkeyup事件
注: onkeypress 是当按下并弹起的组合动作，这个说法是错误的
都是用于表示键盘按下，onkeydown和onkeypress的区别在什么呢？
onkeydown
可以获取所有键，除了打印键Prts
可以获取用户是否点击了修饰键 (ctrl,shift,alt)
不能判断输入的是大写还是小写
onkeypress
只能获取字符键
不能获取用户是否点击了修饰键 (ctrl,shift,alt)
可以判断输入的是大写还是小写
但是！ 在不同的浏览器上，以上规则是不成立的。说这些都没有卵用，你无法控制用户到底使用哪种浏览器。 所以，只要记得keydown和keypress都表示点下了键。。。即可
");
window.frames["iframe_show1191"].document.write(decodeHtml($("textarea#stepcodeTextarea1191").val()));
window.frames["iframe_show1191"].document.close();
$(window.frames["iframe_show1191"]).load(function(){
$("#iframe_show1191").height($("#iframe_show1191").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1191").height($("#iframe_show1191").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
“记得要先用鼠标选中该组件，然后敲击键盘”
<br>
<input type="button" onkeydown="down(event)" value="用于演示按下keydown" >
<br>
<br>
<input type="button" onkeypress="press(event)" value="用于演示按下keypress" >
<br>
<br>
<input type="button" onkeyup="up()" value="用于演示弹起" >
<br>
<br>
<div id="message">
</div>
<script>
var number =0;
function down(e){
var text = "按下了键" + e.keyCode;
if(e.shiftKey==1)
text += " 并且按下了shift键";
document.getElementById("message").innerHTML=text ;
}
function up(){
document.getElementById("message").innerHTML="弹起了键盘";
}
function press(e){
var text = "按下了键" + e.keyCode;
if(e.shiftKey==1)
text += " 并且按下了shift键";
document.getElementById("message").innerHTML=text ;
}
</script>
“记得要先用鼠标选中该组件，然后敲击键盘”
<br>
<input type="button" onkeydown="down(event)" value="用于演示按下keydown" >
<br>
<br>
<input type="button" onkeypress="press(event)" value="用于演示按下keypress" >
<br>
<br>
<input type="button" onkeyup="up()" value="用于演示弹起" >
<br>
<br>
<div id="message">
</div>
<script>
var number =0;
function down(e){
var text = "按下了键" + e.keyCode;
if(e.shiftKey==1)
text += " 并且按下了shift键";
document.getElementById("message").innerHTML=text ;
}
function up(){
document.getElementById("message").innerHTML="弹起了键盘";
}
function press(e){
var text = "按下了键" + e.keyCode;
if(e.shiftKey==1)
text += " 并且按下了shift键";
document.getElementById("message").innerHTML=text ;
}
</script>
");
window.frames["iframe1191"].document.write(decodeHtml(code1191));
window.frames["iframe1191"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1191"]).load(function(){
$("#iframe1191").height($("#iframe1191").contents().find("body").height()+showittryitheight);
});
$("#iframe1191").height($("#iframe1191").contents().find("body").height()+showittryitheight);
alreadyWriteCode1191 = code1191;
$("#rendering1191").hide();
$("#rendered1191").show();
}
var tRereshRetry2DemoPanel1191 = setInterval(rereshRetry2DemoPanel1191,1000);
var binded1191 = false;
$("textarea#stepcodeTextarea1191").keyup(function(){
if(!binded1191){
$(window).bind('beforeunload',function(){
binded1191 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1191 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1191!=newCode){
// window.frames["iframe1191"].document.write("
");
// window.frames["iframe1191"].document.write(decodeHtml($("textarea#stepcodeTextarea1191").val()));
// window.frames["iframe1191"].document.close();
// $(window.frames["iframe1191"]).load(function(){
// $("#iframe1191").height($("#iframe1191").contents().find("body").height()+showittryitheight);
// });
// code1191 = newCode;
// }
});
$(".tryButton1191").click(function(){
$("#tryDiv1191").show();
$("#stepcodeTextarea1191").focus();
$("#stepcodeTextarea1191").height(200);
$("#iframe1191").height(0);
window.frames["iframe1191"].document.write("
");
window.frames["iframe1191"].document.write(decodeHtml($("textarea#stepcodeTextarea1191").val()));
window.frames["iframe1191"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1191"]).load(function(){
$("#iframe1191").height($("#iframe1191").contents().find("body").height()+showittryitheight);
});
$("#iframe1191").height($("#iframe1191").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1191.focus();
editor1191.setSize(null, "250");
$("#rendering1191").hide();
$("#rendered1191").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1191 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1191"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1191.on("change",function(doc){
if(!binded1191){
$(window).bind('beforeunload',function(){
binded1191 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1191 = newCode;
$("textarea#stepcodeTextarea1191").val(newCode);
if(alreadyWriteCode1191!=code1191){
lastModifedTime1191 = new Date().getTime();
$("#rendering1191").show();
$("#rendered1191").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1191 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1191.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1191").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
点击事件，由单击，双击按两个事件组成
当在组件上单击的时候，会触发onclick事件
当在组件上双击的时候，会触发ondblclick事件
注1：在组件上，按下空格或则回车键也可以造成单击的效果，但是却不能造成双击的效果
注2: 自定义函数不要使用click()，这是保留函数名。
");
window.frames["iframe_show1192"].document.write(decodeHtml($("textarea#stepcodeTextarea1192").val()));
window.frames["iframe_show1192"].document.close();
$(window.frames["iframe_show1192"]).load(function(){
$("#iframe_show1192").height($("#iframe_show1192").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1192").height($("#iframe_show1192").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<input type="button" onclick="singleClick()" ondblclick="doubleClick()" value="用于演示单击和双击" >
<br>
<br>
<div id="message"></div>
<script>
function singleClick(){
document.getElementById("message").innerHTML="单击按钮";
}
function doubleClick(){
document.getElementById("message").innerHTML="双击按钮";
}
</script>
<input type="button" onclick="singleClick()" ondblclick="doubleClick()" value="用于演示单击和双击" >
<br>
<br>
<div id="message"></div>
<script>
function singleClick(){
document.getElementById("message").innerHTML="单击按钮";
}
function doubleClick(){
document.getElementById("message").innerHTML="双击按钮";
}
</script>
");
window.frames["iframe1192"].document.write(decodeHtml(code1192));
window.frames["iframe1192"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1192"]).load(function(){
$("#iframe1192").height($("#iframe1192").contents().find("body").height()+showittryitheight);
});
$("#iframe1192").height($("#iframe1192").contents().find("body").height()+showittryitheight);
alreadyWriteCode1192 = code1192;
$("#rendering1192").hide();
$("#rendered1192").show();
}
var tRereshRetry2DemoPanel1192 = setInterval(rereshRetry2DemoPanel1192,1000);
var binded1192 = false;
$("textarea#stepcodeTextarea1192").keyup(function(){
if(!binded1192){
$(window).bind('beforeunload',function(){
binded1192 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1192 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1192!=newCode){
// window.frames["iframe1192"].document.write("
");
// window.frames["iframe1192"].document.write(decodeHtml($("textarea#stepcodeTextarea1192").val()));
// window.frames["iframe1192"].document.close();
// $(window.frames["iframe1192"]).load(function(){
// $("#iframe1192").height($("#iframe1192").contents().find("body").height()+showittryitheight);
// });
// code1192 = newCode;
// }
});
$(".tryButton1192").click(function(){
$("#tryDiv1192").show();
$("#stepcodeTextarea1192").focus();
$("#stepcodeTextarea1192").height(200);
$("#iframe1192").height(0);
window.frames["iframe1192"].document.write("
");
window.frames["iframe1192"].document.write(decodeHtml($("textarea#stepcodeTextarea1192").val()));
window.frames["iframe1192"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1192"]).load(function(){
$("#iframe1192").height($("#iframe1192").contents().find("body").height()+showittryitheight);
});
$("#iframe1192").height($("#iframe1192").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1192.focus();
editor1192.setSize(null, "250");
$("#rendering1192").hide();
$("#rendered1192").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1192 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1192"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1192.on("change",function(doc){
if(!binded1192){
$(window).bind('beforeunload',function(){
binded1192 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1192 = newCode;
$("textarea#stepcodeTextarea1192").val(newCode);
if(alreadyWriteCode1192!=code1192){
lastModifedTime1192 = new Date().getTime();
$("#rendering1192").show();
$("#rendered1192").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1192 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1192.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1192").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
当组件的值发生变化的时候，会触发onchange事件
注：对于输入框而言，只有在失去焦点的时候，才会触发onchange，所以需要点击一下"按钮" 造成输入框失去焦点
");
window.frames["iframe_show1193"].document.write(decodeHtml($("textarea#stepcodeTextarea1193").val()));
window.frames["iframe_show1193"].document.close();
$(window.frames["iframe_show1193"]).load(function(){
$("#iframe_show1193").height($("#iframe_show1193").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1193").height($("#iframe_show1193").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<input type="text" id="t1" onchange="change()" value="" >
<br>
<br>
<input type="button" value="令输入框失去焦点的按钮" >
<br>
<br>
<div id="message"></div>
<script>
function change(){
var message = document.getElementById("message");
var t1 = document.getElementById("t1");
message.innerHTML = "输入框的值变为了: "+ t1.value;
}
</script>
<input type="text" id="t1" onchange="change()" value="" >
<br>
<br>
<input type="button" value="令输入框失去焦点的按钮" >
<br>
<br>
<div id="message"></div>
<script>
function change(){
var message = document.getElementById("message");
var t1 = document.getElementById("t1");
message.innerHTML = "输入框的值变为了: "+ t1.value;
}
</script>
");
window.frames["iframe1193"].document.write(decodeHtml(code1193));
window.frames["iframe1193"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1193"]).load(function(){
$("#iframe1193").height($("#iframe1193").contents().find("body").height()+showittryitheight);
});
$("#iframe1193").height($("#iframe1193").contents().find("body").height()+showittryitheight);
alreadyWriteCode1193 = code1193;
$("#rendering1193").hide();
$("#rendered1193").show();
}
var tRereshRetry2DemoPanel1193 = setInterval(rereshRetry2DemoPanel1193,1000);
var binded1193 = false;
$("textarea#stepcodeTextarea1193").keyup(function(){
if(!binded1193){
$(window).bind('beforeunload',function(){
binded1193 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1193 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1193!=newCode){
// window.frames["iframe1193"].document.write("
");
// window.frames["iframe1193"].document.write(decodeHtml($("textarea#stepcodeTextarea1193").val()));
// window.frames["iframe1193"].document.close();
// $(window.frames["iframe1193"]).load(function(){
// $("#iframe1193").height($("#iframe1193").contents().find("body").height()+showittryitheight);
// });
// code1193 = newCode;
// }
});
$(".tryButton1193").click(function(){
$("#tryDiv1193").show();
$("#stepcodeTextarea1193").focus();
$("#stepcodeTextarea1193").height(200);
$("#iframe1193").height(0);
window.frames["iframe1193"].document.write("
");
window.frames["iframe1193"].document.write(decodeHtml($("textarea#stepcodeTextarea1193").val()));
window.frames["iframe1193"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1193"]).load(function(){
$("#iframe1193").height($("#iframe1193").contents().find("body").height()+showittryitheight);
});
$("#iframe1193").height($("#iframe1193").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1193.focus();
editor1193.setSize(null, "250");
$("#rendering1193").hide();
$("#rendered1193").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1193 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1193"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1193.on("change",function(doc){
if(!binded1193){
$(window).bind('beforeunload',function(){
binded1193 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1193 = newCode;
$("textarea#stepcodeTextarea1193").val(newCode);
if(alreadyWriteCode1193!=code1193){
lastModifedTime1193 = new Date().getTime();
$("#rendering1193").show();
$("#rendered1193").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1193 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1193.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1193").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
可以在form元素上，监听提交事件
当form元素@提交的时候，会触发 onsubmit事件
本例使用 提交账号密码 来进行演示
");
window.frames["iframe_show1194"].document.write(decodeHtml($("textarea#stepcodeTextarea1194").val()));
window.frames["iframe_show1194"].document.close();
$(window.frames["iframe_show1194"]).load(function(){
$("#iframe_show1194").height($("#iframe_show1194").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1194").height($("#iframe_show1194").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<form action="/study/login.jsp" onsubmit="login()">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
<script>
function login(){
alert("提交表单");
}
</script>
<form action="/study/login.jsp" onsubmit="login()">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
<script>
function login(){
alert("提交表单");
}
</script>
");
window.frames["iframe1194"].document.write(decodeHtml(code1194));
window.frames["iframe1194"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1194"]).load(function(){
$("#iframe1194").height($("#iframe1194").contents().find("body").height()+showittryitheight);
});
$("#iframe1194").height($("#iframe1194").contents().find("body").height()+showittryitheight);
alreadyWriteCode1194 = code1194;
$("#rendering1194").hide();
$("#rendered1194").show();
}
var tRereshRetry2DemoPanel1194 = setInterval(rereshRetry2DemoPanel1194,1000);
var binded1194 = false;
$("textarea#stepcodeTextarea1194").keyup(function(){
if(!binded1194){
$(window).bind('beforeunload',function(){
binded1194 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1194 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1194!=newCode){
// window.frames["iframe1194"].document.write("
");
// window.frames["iframe1194"].document.write(decodeHtml($("textarea#stepcodeTextarea1194").val()));
// window.frames["iframe1194"].document.close();
// $(window.frames["iframe1194"]).load(function(){
// $("#iframe1194").height($("#iframe1194").contents().find("body").height()+showittryitheight);
// });
// code1194 = newCode;
// }
});
$(".tryButton1194").click(function(){
$("#tryDiv1194").show();
$("#stepcodeTextarea1194").focus();
$("#stepcodeTextarea1194").height(200);
$("#iframe1194").height(0);
window.frames["iframe1194"].document.write("
");
window.frames["iframe1194"].document.write(decodeHtml($("textarea#stepcodeTextarea1194").val()));
window.frames["iframe1194"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1194"]).load(function(){
$("#iframe1194").height($("#iframe1194").contents().find("body").height()+showittryitheight);
});
$("#iframe1194").height($("#iframe1194").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1194.focus();
editor1194.setSize(null, "250");
$("#rendering1194").hide();
$("#rendered1194").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1194 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1194"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1194.on("change",function(doc){
if(!binded1194){
$(window).bind('beforeunload',function(){
binded1194 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1194 = newCode;
$("textarea#stepcodeTextarea1194").val(newCode);
if(alreadyWriteCode1194!=code1194){
lastModifedTime1194 = new Date().getTime();
$("#rendering1194").show();
$("#rendered1194").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1194 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1194.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1194").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
当整个文档加载成功，或者一个图片加载成功，会触发加载事件
当body元素或者img@加载的时候，会触发onload事件
");
window.frames["iframe_show1195"].document.write(decodeHtml($("textarea#stepcodeTextarea1195").val()));
window.frames["iframe_show1195"].document.close();
$(window.frames["iframe_show1195"]).load(function(){
$("#iframe_show1195").height($("#iframe_show1195").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1195").height($("#iframe_show1195").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script>
function loadBody(){
document.getElementById("message1").innerHTML="文档加载成功";
}
function loadImg(){
document.getElementById("message2").innerHTML="图片加载成功";
}
</script>
<body onload="loadBody()">
<div id="message1"></div>
<div id="message2"></div>
</body>
<img onload="loadImg()" src="http://127.0.0.1/example.gif"/>
<script>
function loadBody(){
document.getElementById("message1").innerHTML="文档加载成功";
}
function loadImg(){
document.getElementById("message2").innerHTML="图片加载成功";
}
</script>
<body onload="loadBody()">
<div id="message1"></div>
<div id="message2"></div>
</body>
<img onload="loadImg()" src="http://127.0.0.1/example.gif"/>
");
window.frames["iframe1195"].document.write(decodeHtml(code1195));
window.frames["iframe1195"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1195"]).load(function(){
$("#iframe1195").height($("#iframe1195").contents().find("body").height()+showittryitheight);
});
$("#iframe1195").height($("#iframe1195").contents().find("body").height()+showittryitheight);
alreadyWriteCode1195 = code1195;
$("#rendering1195").hide();
$("#rendered1195").show();
}
var tRereshRetry2DemoPanel1195 = setInterval(rereshRetry2DemoPanel1195,1000);
var binded1195 = false;
$("textarea#stepcodeTextarea1195").keyup(function(){
if(!binded1195){
$(window).bind('beforeunload',function(){
binded1195 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1195 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1195!=newCode){
// window.frames["iframe1195"].document.write("
");
// window.frames["iframe1195"].document.write(decodeHtml($("textarea#stepcodeTextarea1195").val()));
// window.frames["iframe1195"].document.close();
// $(window.frames["iframe1195"]).load(function(){
// $("#iframe1195").height($("#iframe1195").contents().find("body").height()+showittryitheight);
// });
// code1195 = newCode;
// }
});
$(".tryButton1195").click(function(){
$("#tryDiv1195").show();
$("#stepcodeTextarea1195").focus();
$("#stepcodeTextarea1195").height(200);
$("#iframe1195").height(0);
window.frames["iframe1195"].document.write("
");
window.frames["iframe1195"].document.write(decodeHtml($("textarea#stepcodeTextarea1195").val()));
window.frames["iframe1195"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1195"]).load(function(){
$("#iframe1195").height($("#iframe1195").contents().find("body").height()+showittryitheight);
});
$("#iframe1195").height($("#iframe1195").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1195.focus();
editor1195.setSize(null, "250");
$("#rendering1195").hide();
$("#rendered1195").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1195 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1195"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1195.on("change",function(doc){
if(!binded1195){
$(window).bind('beforeunload',function(){
binded1195 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1195 = newCode;
$("textarea#stepcodeTextarea1195").val(newCode);
if(alreadyWriteCode1195!=code1195){
lastModifedTime1195 = new Date().getTime();
$("#rendering1195").show();
$("#rendered1195").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1195 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1195.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1195").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
this表示触发事件的组件，可以在调用函数的时候，作为参数传进去
");
window.frames["iframe_show1204"].document.write(decodeHtml($("textarea#stepcodeTextarea1204").val()));
window.frames["iframe_show1204"].document.close();
$(window.frames["iframe_show1204"]).load(function(){
$("#iframe_show1204").height($("#iframe_show1204").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1204").height($("#iframe_show1204").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<input type="button" onclick="singleClick(this)" value="演示this的按钮1" >
<input type="button" onclick="singleClick(this)" value="演示this的按钮2" >
<br>
<br>
<div id="message"></div>
<script>
function singleClick(button){
var s = "被点击的按钮上的文本是: "+button.value;
document.getElementById("message").innerHTML=s;
}
</script>
<input type="button" onclick="singleClick(this)" value="演示this的按钮1" >
<input type="button" onclick="singleClick(this)" value="演示this的按钮2" >
<br>
<br>
<div id="message"></div>
<script>
function singleClick(button){
var s = "被点击的按钮上的文本是: "+button.value;
document.getElementById("message").innerHTML=s;
}
</script>
");
window.frames["iframe1204"].document.write(decodeHtml(code1204));
window.frames["iframe1204"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1204"]).load(function(){
$("#iframe1204").height($("#iframe1204").contents().find("body").height()+showittryitheight);
});
$("#iframe1204").height($("#iframe1204").contents().find("body").height()+showittryitheight);
alreadyWriteCode1204 = code1204;
$("#rendering1204").hide();
$("#rendered1204").show();
}
var tRereshRetry2DemoPanel1204 = setInterval(rereshRetry2DemoPanel1204,1000);
var binded1204 = false;
$("textarea#stepcodeTextarea1204").keyup(function(){
if(!binded1204){
$(window).bind('beforeunload',function(){
binded1204 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1204 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1204!=newCode){
// window.frames["iframe1204"].document.write("
");
// window.frames["iframe1204"].document.write(decodeHtml($("textarea#stepcodeTextarea1204").val()));
// window.frames["iframe1204"].document.close();
// $(window.frames["iframe1204"]).load(function(){
// $("#iframe1204").height($("#iframe1204").contents().find("body").height()+showittryitheight);
// });
// code1204 = newCode;
// }
});
$(".tryButton1204").click(function(){
$("#tryDiv1204").show();
$("#stepcodeTextarea1204").focus();
$("#stepcodeTextarea1204").height(200);
$("#iframe1204").height(0);
window.frames["iframe1204"].document.write("
");
window.frames["iframe1204"].document.write(decodeHtml($("textarea#stepcodeTextarea1204").val()));
window.frames["iframe1204"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1204"]).load(function(){
$("#iframe1204").height($("#iframe1204").contents().find("body").height()+showittryitheight);
});
$("#iframe1204").height($("#iframe1204").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1204.focus();
editor1204.setSize(null, "250");
$("#rendering1204").hide();
$("#rendered1204").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1204 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1204"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1204.on("change",function(doc){
if(!binded1204){
$(window).bind('beforeunload',function(){
binded1204 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1204 = newCode;
$("textarea#stepcodeTextarea1204").val(newCode);
if(alreadyWriteCode1204!=code1204){
lastModifedTime1204 = new Date().getTime();
$("#rendering1204").show();
$("#rendered1204").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1204 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1204.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1204").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
比如在提交一个表单的时候，如果用户名为空，弹出提示，并阻止原本的提交
1. 在调用函数的时候，增加一个return
2. 在函数中，如果发现用户名为空，则返回false
3. 当onSubmit得到的返回值是false的时候，表单的提交功能就被取消了
");
window.frames["iframe_show1196"].document.write(decodeHtml($("textarea#stepcodeTextarea1196").val()));
window.frames["iframe_show1196"].document.close();
$(window.frames["iframe_show1196"]).load(function(){
$("#iframe_show1196").height($("#iframe_show1196").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1196").height($("#iframe_show1196").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<form method="post" action="/study/login.jsp" onsubmit="return login()">
账号：<input id="name" type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
<script>
function login(){
var name = document.getElementById("name");
if(name.value.length==0){
alert("用户名不能为空");
return false;
}
return true;
}
</script>
<form method="post" action="/study/login.jsp" onsubmit="return login()">
账号：<input id="name" type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
<script>
function login(){
var name = document.getElementById("name");
if(name.value.length==0){
alert("用户名不能为空");
return false;
}
return true;
}
</script>
");
window.frames["iframe1196"].document.write(decodeHtml(code1196));
window.frames["iframe1196"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1196"]).load(function(){
$("#iframe1196").height($("#iframe1196").contents().find("body").height()+showittryitheight);
});
$("#iframe1196").height($("#iframe1196").contents().find("body").height()+showittryitheight);
alreadyWriteCode1196 = code1196;
$("#rendering1196").hide();
$("#rendered1196").show();
}
var tRereshRetry2DemoPanel1196 = setInterval(rereshRetry2DemoPanel1196,1000);
var binded1196 = false;
$("textarea#stepcodeTextarea1196").keyup(function(){
if(!binded1196){
$(window).bind('beforeunload',function(){
binded1196 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1196 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1196!=newCode){
// window.frames["iframe1196"].document.write("
");
// window.frames["iframe1196"].document.write(decodeHtml($("textarea#stepcodeTextarea1196").val()));
// window.frames["iframe1196"].document.close();
// $(window.frames["iframe1196"]).load(function(){
// $("#iframe1196").height($("#iframe1196").contents().find("body").height()+showittryitheight);
// });
// code1196 = newCode;
// }
});
$(".tryButton1196").click(function(){
$("#tryDiv1196").show();
$("#stepcodeTextarea1196").focus();
$("#stepcodeTextarea1196").height(200);
$("#iframe1196").height(0);
window.frames["iframe1196"].document.write("
");
window.frames["iframe1196"].document.write(decodeHtml($("textarea#stepcodeTextarea1196").val()));
window.frames["iframe1196"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1196"]).load(function(){
$("#iframe1196").height($("#iframe1196").contents().find("body").height()+showittryitheight);
});
$("#iframe1196").height($("#iframe1196").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1196.focus();
editor1196.setSize(null, "250");
$("#rendering1196").hide();
$("#rendered1196").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1196 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1196"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1196.on("change",function(doc){
if(!binded1196){
$(window).bind('beforeunload',function(){
binded1196 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1196 = newCode;
$("textarea#stepcodeTextarea1196").val(newCode);
if(alreadyWriteCode1196!=code1196){
lastModifedTime1196 = new Date().getTime();
$("#rendering1196").show();
$("#rendered1196").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1196 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1196.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1196").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show2930"].document.write(decodeHtml($("textarea#stepcodeTextarea2930").val()));
window.frames["iframe_show2930"].document.close();
$(window.frames["iframe_show2930"]).load(function(){
$("#iframe_show2930").height($("#iframe_show2930").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2930").height($("#iframe_show2930").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
a{
font-size:14px;
color: CornflowerBlue;
text-decoration: none;
}
div.menuweapon{
position: absolute;
left: 10px;
top: 20px;
}
div.menuarmor{
position: absolute;
left: 45px;
top: 20px;
}
div.menuhero{
position: absolute;
left: 80px;
top: 20px;
}
div.menu {
width:80px;
border: 1px solid lightgray;
margin-top:15px;
display:none;
}
div.menu a{
display:block;
font-size:14px;
font-family:宋体;
color: #888;
text-decoration: none;
padding:10 0 10 15;
}
div.menu a:hover
{
background-color: #f1f1f1;
}
</style>
<script>
function showmenu(type){
var menuDivs = document.getElementsByClassName("menu");
for(i=0;i<menuDivs.length;i++){
var d= menuDivs[i];
d.style.display="none";
}
var divClassName= "menu"+type;
var div = document.getElementsByClassName(divClassName)[0];
div.style.display="block";
}
</script>
<a href="#nowhere" onmouseover="showmenu('weapon')" > 武器 </a>
<a href="#nowhere" onmouseover="showmenu('armor')" > 护甲 </a>
<a href="#nowhere" onmouseover="showmenu('hero')" > 英雄 </a>
<div class="menu menuweapon" >
<a href="#nowhere"> 大剑 </a>
<a href="#nowhere"> 屠龙 </a>
<a href="#nowhere"> 倚天 </a>
<a href="#nowhere"> 七孔砖 </a>
</div>
<div class="menu menuarmor">
<a href="#nowhere"> 胸甲 </a>
<a href="#nowhere"> 护腕 </a>
<a href="#nowhere"> 头盔 </a>
<a href="#nowhere"> 鞋子 </a>
</div>
<div class="menu menuhero">
<a href="#nowhere"> 盖伦 </a>
<a href="#nowhere"> 提莫 </a>
<a href="#nowhere"> 安妮 </a>
<a href="#nowhere"> 死哥 </a>
</div>
<div style="height:200px"></div>
<style>
a{
font-size:14px;
color: CornflowerBlue;
text-decoration: none;
}
div.menuweapon{
position: absolute;
left: 10px;
top: 20px;
}
div.menuarmor{
position: absolute;
left: 45px;
top: 20px;
}
div.menuhero{
position: absolute;
left: 80px;
top: 20px;
}
div.menu {
width:80px;
border: 1px solid lightgray;
margin-top:15px;
display:none;
}
div.menu a{
display:block;
font-size:14px;
font-family:宋体;
color: #888;
text-decoration: none;
padding:10 0 10 15;
}
div.menu a:hover
{
background-color: #f1f1f1;
}
</style>
<script>
function showmenu(type){
var menuDivs = document.getElementsByClassName("menu");
for(i=0;i<menuDivs.length;i++){
var d= menuDivs[i];
d.style.display="none";
}
var divClassName= "menu"+type;
var div = document.getElementsByClassName(divClassName)[0];
div.style.display="block";
}
</script>
<a href="#nowhere" onmouseover="showmenu('weapon')" > 武器 </a>
<a href="#nowhere" onmouseover="showmenu('armor')" > 护甲 </a>
<a href="#nowhere" onmouseover="showmenu('hero')" > 英雄 </a>
<div class="menu menuweapon" >
<a href="#nowhere"> 大剑 </a>
<a href="#nowhere"> 屠龙 </a>
<a href="#nowhere"> 倚天 </a>
<a href="#nowhere"> 七孔砖 </a>
</div>
<div class="menu menuarmor">
<a href="#nowhere"> 胸甲 </a>
<a href="#nowhere"> 护腕 </a>
<a href="#nowhere"> 头盔 </a>
<a href="#nowhere"> 鞋子 </a>
</div>
<div class="menu menuhero">
<a href="#nowhere"> 盖伦 </a>
<a href="#nowhere"> 提莫 </a>
<a href="#nowhere"> 安妮 </a>
<a href="#nowhere"> 死哥 </a>
</div>
<div style="height:200px"></div>
");
window.frames["iframe2930"].document.write(decodeHtml(code2930));
window.frames["iframe2930"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2930"]).load(function(){
$("#iframe2930").height($("#iframe2930").contents().find("body").height()+showittryitheight);
});
$("#iframe2930").height($("#iframe2930").contents().find("body").height()+showittryitheight);
alreadyWriteCode2930 = code2930;
$("#rendering2930").hide();
$("#rendered2930").show();
}
var tRereshRetry2DemoPanel2930 = setInterval(rereshRetry2DemoPanel2930,1000);
var binded2930 = false;
$("textarea#stepcodeTextarea2930").keyup(function(){
if(!binded2930){
$(window).bind('beforeunload',function(){
binded2930 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2930 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2930!=newCode){
// window.frames["iframe2930"].document.write("
");
// window.frames["iframe2930"].document.write(decodeHtml($("textarea#stepcodeTextarea2930").val()));
// window.frames["iframe2930"].document.close();
// $(window.frames["iframe2930"]).load(function(){
// $("#iframe2930").height($("#iframe2930").contents().find("body").height()+showittryitheight);
// });
// code2930 = newCode;
// }
});
$(".tryButton2930").click(function(){
$("#tryDiv2930").show();
$("#stepcodeTextarea2930").focus();
$("#stepcodeTextarea2930").height(200);
$("#iframe2930").height(0);
window.frames["iframe2930"].document.write("
");
window.frames["iframe2930"].document.write(decodeHtml($("textarea#stepcodeTextarea2930").val()));
window.frames["iframe2930"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2930"]).load(function(){
$("#iframe2930").height($("#iframe2930").contents().find("body").height()+showittryitheight);
});
$("#iframe2930").height($("#iframe2930").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2930.focus();
editor2930.setSize(null, "250");
$("#rendering2930").hide();
$("#rendered2930").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2930 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2930"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2930.on("change",function(doc){
if(!binded2930){
$(window).bind('beforeunload',function(){
binded2930 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2930 = newCode;
$("textarea#stepcodeTextarea2930").val(newCode);
if(alreadyWriteCode2930!=code2930){
lastModifedTime2930 = new Date().getTime();
$("#rendering2930").show();
$("#rendered2930").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2930 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2930.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2930").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
");
window.frames["iframe_show2932"].document.write(decodeHtml($("textarea#stepcodeTextarea2932").val()));
window.frames["iframe_show2932"].document.close();
$(window.frames["iframe_show2932"]).load(function(){
$("#iframe_show2932").height($("#iframe_show2932").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2932").height($("#iframe_show2932").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<script>
function check(){
var name = document.getElementById("name").value;
var noMessage= document.getElementById("noMessage");
var yesMessage= document.getElementById("yesMessage");
noMessage.style.display="none";
yesMessage.style.display="none";
if(0!=name.length){
var firstChar = name.charAt(0);
if('a'==firstChar || 'A'==firstChar)
noMessage.style.display="inline";
else
yesMessage.style.display="inline";
}
}
</script>
<input id="name" placeholder="请输入账号名" onkeyup="check()">
<span id="noMessage" style="color:red;display:none;">账号已经存在</span>
<span id="yesMessage" style="color:green;display:none;">账号可以使用</span>
</html>
<html>
<script>
function check(){
var name = document.getElementById("name").value;
var noMessage= document.getElementById("noMessage");
var yesMessage= document.getElementById("yesMessage");
noMessage.style.display="none";
yesMessage.style.display="none";
if(0!=name.length){
var firstChar = name.charAt(0);
if('a'==firstChar || 'A'==firstChar)
noMessage.style.display="inline";
else
yesMessage.style.display="inline";
}
}
</script>
<input id="name" placeholder="请输入账号名" onkeyup="check()">
<span id="noMessage" style="color:red;display:none;">账号已经存在</span>
<span id="yesMessage" style="color:green;display:none;">账号可以使用</span>
</html>
");
window.frames["iframe2932"].document.write(decodeHtml(code2932));
window.frames["iframe2932"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2932"]).load(function(){
$("#iframe2932").height($("#iframe2932").contents().find("body").height()+showittryitheight);
});
$("#iframe2932").height($("#iframe2932").contents().find("body").height()+showittryitheight);
alreadyWriteCode2932 = code2932;
$("#rendering2932").hide();
$("#rendered2932").show();
}
var tRereshRetry2DemoPanel2932 = setInterval(rereshRetry2DemoPanel2932,1000);
var binded2932 = false;
$("textarea#stepcodeTextarea2932").keyup(function(){
if(!binded2932){
$(window).bind('beforeunload',function(){
binded2932 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2932 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2932!=newCode){
// window.frames["iframe2932"].document.write("
");
// window.frames["iframe2932"].document.write(decodeHtml($("textarea#stepcodeTextarea2932").val()));
// window.frames["iframe2932"].document.close();
// $(window.frames["iframe2932"]).load(function(){
// $("#iframe2932").height($("#iframe2932").contents().find("body").height()+showittryitheight);
// });
// code2932 = newCode;
// }
});
$(".tryButton2932").click(function(){
$("#tryDiv2932").show();
$("#stepcodeTextarea2932").focus();
$("#stepcodeTextarea2932").height(200);
$("#iframe2932").height(0);
window.frames["iframe2932"].document.write("
");
window.frames["iframe2932"].document.write(decodeHtml($("textarea#stepcodeTextarea2932").val()));
window.frames["iframe2932"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2932"]).load(function(){
$("#iframe2932").height($("#iframe2932").contents().find("body").height()+showittryitheight);
});
$("#iframe2932").height($("#iframe2932").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2932.focus();
editor2932.setSize(null, "250");
$("#rendering2932").hide();
$("#rendered2932").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2932 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2932"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2932.on("change",function(doc){
if(!binded2932){
$(window).bind('beforeunload',function(){
binded2932 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2932 = newCode;
$("textarea#stepcodeTextarea2932").val(newCode);
if(alreadyWriteCode2932!=code2932){
lastModifedTime2932 = new Date().getTime();
$("#rendering2932").show();
$("#rendered2932").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2932 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2932.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2932").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
示例
13
:
答案-验证账号是否已经存在
顶
折
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
示例
14
:
练习-选中所有的checkbox
练习难度
顶
折
 Or
姿势不对,事倍功半!
点击查看做练习的正确姿势
有多个复选框
点击选中所有，所有的复选框都选中了
点击反向选择，反选复选框
");
window.frames["iframe_show2935"].document.write(decodeHtml($("textarea#stepcodeTextarea2935").val()));
window.frames["iframe_show2935"].document.close();
$(window.frames["iframe_show2935"]).load(function(){
$("#iframe_show2935").height($("#iframe_show2935").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2935").height($("#iframe_show2935").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script>
</script>
<style>
a{
font-size:12px;
font-weight:bold;
color:SteelBlue;
text-decoration: none;
}
</style>
<script>
function selectAll(checkbox){
var checked = checkbox.checked;
var checkboxes= document.getElementsByTagName("input");
for(var i in checkboxes){
checkboxes[i].checked=checked?"checked":"";
}
}
function reverse(){
var checkboxes= document.getElementsByTagName("input");
for(var i in checkboxes){
if(0==i)
continue;
checkboxes[i].checked=checkboxes[i].checked?"":"checked";
}
}
</script>
<input type="checkbox" onclick="selectAll(this)" > 全选<br>
<input type="checkbox" > tokyo hot<br>
<input type="checkbox" > dota <br>
<input type="checkbox" > lol <br>
<input type="checkbox" > wow <br>
<input type="checkbox" > warcraft <br>
<input type="checkbox" > diablo <br>
<a href="#nowhere" onclick="reverse()">反选</a>
<script>
</script>
<style>
a{
font-size:12px;
font-weight:bold;
color:SteelBlue;
text-decoration: none;
}
</style>
<script>
function selectAll(checkbox){
var checked = checkbox.checked;
var checkboxes= document.getElementsByTagName("input");
for(var i in checkboxes){
checkboxes[i].checked=checked?"checked":"";
}
}
function reverse(){
var checkboxes= document.getElementsByTagName("input");
for(var i in checkboxes){
if(0==i)
continue;
checkboxes[i].checked=checkboxes[i].checked?"":"checked";
}
}
</script>
<input type="checkbox" onclick="selectAll(this)" > 全选<br>
<input type="checkbox" > tokyo hot<br>
<input type="checkbox" > dota <br>
<input type="checkbox" > lol <br>
<input type="checkbox" > wow <br>
<input type="checkbox" > warcraft <br>
<input type="checkbox" > diablo <br>
<a href="#nowhere" onclick="reverse()">反选</a>
");
window.frames["iframe2935"].document.write(decodeHtml(code2935));
window.frames["iframe2935"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2935"]).load(function(){
$("#iframe2935").height($("#iframe2935").contents().find("body").height()+showittryitheight);
});
$("#iframe2935").height($("#iframe2935").contents().find("body").height()+showittryitheight);
alreadyWriteCode2935 = code2935;
$("#rendering2935").hide();
$("#rendered2935").show();
}
var tRereshRetry2DemoPanel2935 = setInterval(rereshRetry2DemoPanel2935,1000);
var binded2935 = false;
$("textarea#stepcodeTextarea2935").keyup(function(){
if(!binded2935){
$(window).bind('beforeunload',function(){
binded2935 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2935 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2935!=newCode){
// window.frames["iframe2935"].document.write("
");
// window.frames["iframe2935"].document.write(decodeHtml($("textarea#stepcodeTextarea2935").val()));
// window.frames["iframe2935"].document.close();
// $(window.frames["iframe2935"]).load(function(){
// $("#iframe2935").height($("#iframe2935").contents().find("body").height()+showittryitheight);
// });
// code2935 = newCode;
// }
});
$(".tryButton2935").click(function(){
$("#tryDiv2935").show();
$("#stepcodeTextarea2935").focus();
$("#stepcodeTextarea2935").height(200);
$("#iframe2935").height(0);
window.frames["iframe2935"].document.write("
");
window.frames["iframe2935"].document.write(decodeHtml($("textarea#stepcodeTextarea2935").val()));
window.frames["iframe2935"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2935"]).load(function(){
$("#iframe2935").height($("#iframe2935").contents().find("body").height()+showittryitheight);
});
$("#iframe2935").height($("#iframe2935").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2935.focus();
editor2935.setSize(null, "250");
$("#rendering2935").hide();
$("#rendered2935").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2935 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2935"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2935.on("change",function(doc){
if(!binded2935){
$(window).bind('beforeunload',function(){
binded2935 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2935 = newCode;
$("textarea#stepcodeTextarea2935").val(newCode);
if(alreadyWriteCode2935!=code2935){
lastModifedTime2935 = new Date().getTime();
$("#rendering2935").show();
$("#rendered2935").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2935 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2935.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2935").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
示例
15
:
答案-选中所有的checkbox
顶
折
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
