html 測試 左入右出

html 測試 左入右出

<div id="LR18314847">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
input HTML
</textarea>
<div class="DP">00</div>
</div>
<script>
LiRoT('LR18314847','300');
</script>

html

00

<style>
.udt , .udf{  width:100%; background-color:azure;font-size:18px;}
.uds { background-color:azure;
          cursor:pointer;   
          float:left; display:   
          table-cell;
          vertical-align: middle; 
          text-align: center; 
          width: 80px; 
          height: 30px;
          border: thin solid black;font-size:18px;        }
</style>

<script>
/* --------NEW UP----LOAD-----------*/
function LiRoT(x,w1){
var wf = Number(w1)+40;
var x0 = document.getElementById(x);
var x1 = x0.querySelector(".DP");
var strVar="";
strVar += "<table border='2' style='width: 100%;'>";
strVar += "<tbody >";
strVar += "<tr ><td style='width: 50%;'>";
strVar += "<form>";
strVar += "<div class='uds' id='" + x + "AL1' onclick='LiRoDP(this.id)'>預覽</div>";
strVar += "<div class='uds' id='" + x + "AL3' onclick='LiRoRS(this.id)'>還原</div><br>";
strVar += "<textarea class='udt' style='height:" + w1 + "px'  id='" + x+ "TTL' spellcheck='false' wrap='logical'>";
strVar += "<\/textarea></td><td style='width: 50%;'>";
strVar += "<iframe class='udf' style='height:" + wf + "px' id='" + x + "ifL' ><\/iframe>";
strVar += "<\/form>";
strVar += "</td></tr>";
strVar += "</tbody>";
strVar += "</table>";
x1.innerHTML=strVar ;
LiRoRS(x+"AL1");
}
</script>

<script>/* --------NEW UP-----DP-----------*/
function LiRoDP(qq1){
var Mid= qq1.substring(0,qq1.length-3);
var Ttext = document.getElementById(Mid+'TTL').value;
var Ri= document.getElementById(Mid+'ifL');
Ri.innerHTML = "";
var ifrw = (Ri.contentWindow) ? Ri.contentWindow : (Ri.contentDocument.document) ? Ri.contentDocument.document : Ri.contentDocument;
ifrw .document.open();
ifrw .document.write(Ttext);
ifrw .document.close();
}
</script>

<script>/* --------NEW UP-----rs-----------*/
function LiRoRS(qq1){
var Mid= qq1.substring(0,qq1.length-3);
var x0 = document.getElementById(Mid);
var LL = x0.querySelector(".LLtextA");
document.getElementById(Mid+'TTL').value = LL.value;
LiRoDP(qq1);
}
</script>


<!------------------------------------------------------------------>
<br />
<div id="LR18314847">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
input HTML
</textarea>
<div class="DP">00</div>
</div>
<script>
LiRoT('LR18314847','300');
</script>

Edit

管理員 html 測試 上入 下出

html 測試 上入 下出

<div id="ud123">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">

HTML input

</textarea>
<div class="DP">00</div></div>
<script>udFT('ud123','300');</script>

HTML input

00

<style>
.udt , .udf{  width:100%; background-color:azure;font-size:18px}
.uds { background-color:azure;
       cursor:pointer;     
       float:left; display:     
       table-cell;
       vertical-align: middle;   
       text-align: center;   
       width: 80px;   
       height: 30px;
       border: thin solid black;
      font-size:18px       }
</style>

<script>
/* --------NEW UP----LOAD-----------*/
function udFT(x,w1){
var x0 = document.getElementById(x);
var x1 = x0.querySelector(".DP");
var strVar="";
strVar += "<table border='2' style='width: 100%;'>";
strVar += "<tbody >";
strVar += "<tr ><td >";
strVar += "<form>";
strVar += "<div class='uds' id='" + x + "AL1' onclick='udDP(this.id)'>預覽</div>";
strVar += "<div class='uds' id='" + x + "AL3' onclick='udRS(this.id)'>還原</div><br>";
strVar += "<textarea class='udt' style='height:" + w1 + "px'  id='" + x+ "TTL' spellcheck='false' wrap='logical'>";
strVar += "<\/textarea><br>";
strVar += "<iframe class='udf' style='height:" + w1 + "px'  id='" + x + "ifL' ><\/iframe>";
strVar += "<\/form>";
strVar += "</td></tr>";
strVar += "</tbody>";
strVar += "</table>";
x1.innerHTML=strVar ;
udRS(x+"AL1");
}
</script>

<script>/* --------NEW UP-----DP-----------*/
function udDP(qq1){
var Mid= qq1.substring(0,qq1.length-3);
var Ttext = document.getElementById(Mid+'TTL').value;
var Ri= document.getElementById(Mid+'ifL');
Ri.innerHTML = "";
var ifrw = (Ri.contentWindow) ? Ri.contentWindow : (Ri.contentDocument.document) ? Ri.contentDocument.document : Ri.contentDocument;
ifrw .document.open();
ifrw .document.write(Ttext);
ifrw .document.close();
}
</script>

<script>/* --------NEW UP-----rs-----------*/
function udRS(qq1){
var Mid= qq1.substring(0,qq1.length-3);
var x0 = document.getElementById(Mid);
var LL = x0.querySelector(".LLtextA");
document.getElementById(Mid+'TTL').value = LL.value;
udDP(qq1);
}
</script>


<div id="ud123">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
HTML input
</textarea>
<div class="DP">
00</div>
</div>
<!----------------------------------------------------------------------------------->
<script>
udFT('ud123','300');
</script>

Edit

html 測試 單入 單出

html 測試 單入 單出

<div id="W999999999">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">

HTML input

</textarea>
<div class="DP">00</div></div>
<script>WWFT('W999999999','400');</script>

HTML input

00

<style>
.LLtext, .LLif{  width:100%; background-color:azure;font-size:18px}


.LRC { background-color:azure;
     cursor:pointer;     
     float:left; display:     
     table-cell;
     vertical-align: middle;   
     text-align: center;   
     width: 80px;   
     border: thin solid black;
     font-size:18px }
</style>


<script>/* --------單入 單出-----LOAD-----------*/
function WWFT(x,w1){
var x0 = document.getElementById(x);
var x1 = x0.querySelector(".DP");
var strVar="";
strVar += "<table border='2' style='width: 100%;'>";
strVar += "<tbody >";
strVar += "<tr ><td >";
strVar += "<form>";
strVar += "<div class='LRC' id='" + x + "AL1' onclick='WWdp(this.id)'>預覽</div>";
strVar += "<div class='LRC' id='" + x + "AL2' onclick='WWin(this.id)'>寫程式</div>";
strVar += "<div class='LRC' id='" + x + "AL3' onclick='WWrs(this.id)'>還原</div><br>";
strVar += "<textarea style='height:" + w1 + "px' class='LLtext' id='" + x+ "TTL' spellcheck='false' wrap='logical'>LLLLLLLLLLLLLLLLL";
strVar += "<\/textarea>";
strVar += "<iframe style='height:" + w1 + "px' class='LLif' id='" + x + "ifL' ><\/iframe>";
strVar += "<\/form>";
strVar += "</td></tr>";
strVar += "</tbody>";
strVar += "</table>";
x1.innerHTML=strVar ;
WWrs(x+"AL1");
}
</script>

<script>/* --------單入 單出-----DP-----------*/
function WWdp(qq1){
var Mid= qq1.substring(0,qq1.length-3);
document.getElementById(Mid+'AL1').style.backgroundColor = "azure";
document.getElementById(Mid+'AL2').style.backgroundColor = "gainsboro";

document.getElementById(Mid+'TTL').style.display='none';
document.getElementById(Mid+'ifL').style.display='block';
var Ttext = document.getElementById(Mid+'TTL').value;
var Ri= document.getElementById(Mid+'ifL');
Ri.innerHTML = "";
var ifrw = (Ri.contentWindow) ? Ri.contentWindow : (Ri.contentDocument.document) ? Ri.contentDocument.document : Ri.contentDocument;
ifrw .document.open();
ifrw .document.write(Ttext);
ifrw .document.close();}
</script>

<script>/* --------單入 單出-----rs-----------*/
function WWrs(qq1){
var Mid= qq1.substring(0,qq1.length-3);
var x0 = document.getElementById(Mid);
var LL = x0.querySelector(".LLtextA");
document.getElementById(Mid+'TTL').value = LL.value;
WWdp(qq1);}
</script>

<script>/* --------單入 單出-----input-----------*/
function WWin(qq1){
var Mid= qq1.substring(0,qq1.length-3);

document.getElementById(Mid+'AL1').style.backgroundColor = "gainsboro";
document.getElementById(Mid+'AL2').style.backgroundColor = "azure";
document.getElementById(Mid+'TTL').style.display='block';
document.getElementById(Mid+'ifL').style.display='none';
}
</script>

<!----------------------------------------------------------------------------------->
<div id="W999999999">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
HTML input
</textarea>
<div class="DP">00</div>
</div>
<!----------------------------------------------------------------------------------->
<script>
WWFT('W999999999','400');
</script>

Edit

html 測試 左右 各一 測試

html 測試 左右 各一 測試

<div id="LR123456789" >
<div class="UU1"></div>
<textarea class="Ltxt" spellcheck="false" wrap="logical" style="display:none;">
<p style="color:red;font-size:36px;">
左側顯示
</p>
</textarea>
<textarea class="Rtxt" spellcheck="false" wrap="logical" style="display:none;">
<p style="color:blue;font-size:36px;">
右側顯示
</p>
</textarea>
</div>
<script>LRonload('LR123456789',"400");</script>

<p style="color:red;font-size:36px;"> 左側顯示 </p> <p style="color:blue;font-size:36px;"> 右側顯示 </p>

<style>
.RRtext , .LLtext { font-size:110%;
                               display:none;   
                               background-color:azure;     
                               width: 100%;
                               height: 300px;     
                               border: thin solid black;
                               font-size:18px; }
.LRC { cursor:pointer;       
             background-color:gainsboro;       
             float:left; display:       
             table-cell;
             vertical-align: middle;     
             text-align: center;     
             width: 80px;     
             height: 30px;     
            border: thin solid black;     
            overflow:auto;
            font-size:18px ;}

.LLif , .RRif { font-size:110%;
                        background-color:azure;     
                        width: 100%;     
                        height: 300px;     
                        border: thin solid black;
                        font-size:18px;}
</style>
<!-----------------------------reset--------------------------------------->
<script>
function FLRrs(qq1){
Mid= qq1.substring(0,qq1.length-2);
LRd= qq1.substring(qq1.length-2,qq1.length-1);

var x0 = document.getElementById(Mid);
var x1 = x0.getElementsByClassName(LRd+"txt");
document.getElementById(Mid+LRd+"tt").value = x1[0].value;
FLRdp(qq1)
}
</script>
<!-----------------------------input------------------------------------------>
<script>
function FLRtt(qq1){
Mid= qq1.substring(0,qq1.length-2);
LRd= qq1.substring(qq1.length-2,qq1.length-1);
document.getElementById(Mid+LRd+"a").style.backgroundColor = "gainsboro";
document.getElementById(Mid+LRd+"b").style.backgroundColor = "azure";
document.getElementById(Mid+LRd+"tt").style.display='block';   
document.getElementById(Mid+LRd+"ff").style.display='none';
}
</script>

<!--------------------------------display ----------CCK----------------------------------------->
<script>
function FLRdp(qq1){
Mid= qq1.substring(0,qq1.length-2);
LRd= qq1.substring(qq1.length-2,qq1.length-1);
document.getElementById(Mid+LRd+"a").style.backgroundColor = "azure";
document.getElementById(Mid+LRd+"b").style.backgroundColor = "gainsboro";
document.getElementById(Mid+LRd+"tt").style.display='none';   
document.getElementById(Mid+LRd+"ff").style.display='block';
var Ttext = document.getElementById(Mid+LRd+"tt").value;
var Ri= document.getElementById(Mid+LRd+"ff");
Ri.innerHTML = "";
var ifrw = (Ri.contentWindow) ? Ri.contentWindow : (Ri.contentDocument.document) ? Ri.contentDocument.document : Ri.contentDocument;
ifrw .document.open();
ifrw .document.write(Ttext);
ifrw .document.close();
}
</script>

<!--------------------------------LOAD--------------------------------------------------->
<script>
function LRonload(qq1,hh){
var x0 = document.getElementById(qq1);
var x1 = x0.querySelector(".UU1");
var strVar="";
strVar += "<table border=\"2\" style=\"width: 100%;\">";
strVar += "<tbody>";
strVar += "<tr><td width=\"50%\">";
strVar += "<form>";
strVar += "<div class='LRC' id='" + qq1 + "La' onclick='FLRdp(this.id)'>預覽</div>";
strVar += "<div class='LRC' id='" + qq1 + "Lb' onclick='FLRtt(this.id)'>寫程式</div>";
strVar += "<div class='LRC' id='" + qq1 + "Lc' onclick='FLRrs(this.id)'>還原</div>";
strVar += "<textarea style='height:" + hh + "px' class='LLtext' id='" + qq1 + "Ltt' spellcheck='false' wrap='logical'>LLLLLLLLLLLLLLLLL";
strVar += "<\/textarea>";
strVar += "<iframe style='height:" + hh + "px'  class='LLif' id='" + qq1 + "Lff' ><\/iframe>";
strVar += "<\/form>";
strVar += "<\/td><td>";
strVar += "<form>";
strVar += "<div class='LRC' id='" + qq1 + "Ra' onclick='FLRdp(this.id)'>預覽</div>";
strVar += "<div class='LRC' id='" + qq1 + "Rb' onclick='FLRtt(this.id)'>寫程式</div>";
strVar += "<div class='LRC' id='" + qq1 + "Rc' onclick='FLRrs(this.id)'>還原</div>";
strVar += "<textarea style='height:" + hh + "px'  class='LLtext' id='" + qq1 + "Rtt' spellcheck='false' wrap='logical'>RRRRRRRRRRRRRRRRRRRRR";
strVar += "<\/textarea>";
strVar += "<\/form>";
strVar += "<iframe style='height:" + hh + "px' class='RRif' id='" + qq1 + "Rff' ><\/iframe>";

strVar += "<\/td><\/tr>";
strVar += "<\/tbody><\/table>";
x1.innerHTML=strVar ;
FLRrs(qq1+"La");
FLRrs(qq1+"Ra");
}
</script>
<!*******************************************************************>
<div id="LR123456789" >
<div class="UU1"></div>
<textarea class="Ltxt" spellcheck="false" wrap="logical" style="display:none;">
<p style="color:red;font-size:36px;">
左側顯示
</p>
</textarea>
<textarea class="Rtxt" spellcheck="false" wrap="logical" style="display:none;">
<p style="color:blue;font-size:36px;">
右側顯示
</p>
</textarea>
</div>
<!----------------------------------------------------------------------------------->
<script>
LRonload('LR123456789',"400");
</script>

Edit