若轉載請註明
依賴jquery
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>用於一次性測試js</title>
<style>
textarea{width:400px;height:200px;}
</style>
<script src="QUnit/resources/jquery-1.9.1.js"></script>
</head>
<body>
<!-- js編輯區-->
<p>js編輯區</p>
<textarea id="js_area">
</textarea>
<div>
<input type="button" onclick="run();" value="運行"/>
<input type="button" onclick="clearJs();" value="清空"/>
<input type="button" onclick="createAlert();" value="alert"/>
<input type="button" onclick="createGetById();" value="GetById"/>
</div>
<!-- html編輯區-->
<p>html編輯區</p>
<textarea id="html_area">
</textarea>
<div>
<input type="button" onclick="clearHtml();" value="清空"/>
<input type="button" onclick="createDiv();" value="DIV"/>
<input type="button" onclick="createSpan();" value="SPAN"/>
<input type="button" onclick="createButton();" value="按鈕"/>
<input type="button" onclick="createText();" value="文本框"/>
<input type="button" onclick="createSelect();" value="下拉框"/>
<input type="button" onclick="createA();" value="鏈接"/>
</div>
<!-- 結果顯示區-->
<p>結果顯示區</p>
<div id="result"></div>
</body>
<script>
var run = function(){
//先清空之前的結果
$("#result").html('');
var script = $("\<script type='text/javascript'\>\</script\>");
script.append($("#js_area").val());
$("#result").append($("#html_area").val());
$("#result").append(script);
}
var clearJs = function(){
$("#js_area").val("");
}
var clearHtml = function(){
$("#html_area").val("");
}
var createDiv = function(){
var content = "\<div id=''\>\</div\>";
insertAtCursor($("#html_area").get(0),content);
}
var createSpan = function(){
var content = "\<span id=''\>\</span\>";
insertAtCursor($("#html_area").get(0),content);
}
var createButton = function(){
var content = "\<input type='button' name='' id=''/\>";
insertAtCursor($("#html_area").get(0),content);
}
var createText = function(){
var content = "\<input type='text' name='' id=''/\>";
insertAtCursor($("#html_area").get(0),content);
}
var createSelect = function(){
var content = "\<select name='' id=''\>\<option value=''\> \<option/\> \n<select>";
insertAtCursor($("#html_area").get(0),content);
}
var createA = function(){
var content = "\<a name='' id='' href='' target=''\> \</a\>";
insertAtCursor($("#html_area").get(0),content);
}
var createAlert = function(){
var content = "alert('')";
insertAtCursor($("#js_area").get(0),content);
}
var createGetById = function(){
var content = "$('#id')";
insertAtCursor($("#js_area").get(0),content);
}
var insertAtCursor = function(obj/*html object*/,content/*String*/){
//IE support
if (document.selection)
{
obj.focus();
var sel= document.selection.createRange();
sel.text= content;
sel.select();
//firefox support
}else{
if(typeof obj.selectionStart == 'number'){
var start = obj.selectionStart;
var end = obj.selectionEnd;
var pre = obj.value.substr(0, start);
var post = obj.value.substr(end);
obj.value = pre+ content+post;
}
}
}
</script>
</html>