Jump to content

Recommended Posts

Hello & Thanks;

Here is a  ' mini-Tutorial: moving text to & from <textarea> & <pre> ' 

http://vmars.us/ShowMe/Tutorial-Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore-RO-VM.html 

I'll also put code here for safekeeping

<!DOCTYPE html>
<html>
<head>
<!-- https://www.freeformatter.com/html-validator.html  
http://vmars.us/ShowMe/Tutorial-Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore-RO-VM.html 
-->
<title id="titleId"></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
  <style>         
  </style>
</head>
  <body onload="documentURL() , onloadRestoreTextarea()" >
<br>
<button onclick="saveAs(filename, allHtml)">Save This Page</button>
<br><br>
<div id="inlineDiv" style="display: inline-block;">


<div style="border-style: solid; align-text: center;  border-width: 1px; display: inline-block;">
<button onclick="sendToConcoleLog ()">sendToConcoleLog</button>
<br><br>
             <textarea  id="toConsoleLogId"  rows="4" cols="12">:</textarea>    
</div>

<div style="border-style: solid; align-text: center; border-width: 1px; display: inline-block;">
<button onclick="saveItAll()">Copy this into PRE</button>
<br>
             <textarea  class="copyFrom"  rows="4" cols="12"></textarea>    
</div>
 <div style="border-style: solid; align-text: center; border-width: 1px; display: inline-block;">
<button onclick="restoreItAll()">Restore this from Pre</button>
<br>
            <pre  contenteditable="true" class="pasteInto"  ></pre>
</div>
</div>  <!-- id="inlineBlock">  -->
<div style="border-style: dotted; align-text: center;  border-width: 1px;">

<pre>
Thought I would make a turorial so I remember what I learned from you all ,
and to pass on your wisdom. Hope this helps someone :)

Try this: 
------------------------------------------------------------------------------------------------------------------------

1) Type something into "Copy this into Pre" textarea box . 
Then click "Copy this into Pre" Button .
Text is copied into "Restore this from Pre" "pre area ' . 
And "Copy this into Pre" textarea box , is Cleared .

Study This : function saveItAll() 
------------------------------------------------------------------------------------------------------------------------

2) The click on "Restore this from Pre" Button , 
Text is copied from "Restore this from Pre"  area  
into  "Copy this into Pre" area .
And "Restore this from Pre"  area  , is Cleared .

Study This: function restoreItAll()
------------------------------------------------------------------------------------------------------------------------

3) Now Type something into "Copy this into Pre" textarea box Again . 
Then click "Copy this into Pre" Button .
Text is copied into "Restore this from Pre" pre area . 
And "Copy this into Pre" textarea box , is Cleared . 

But this time , click the "Save This Page" Button .

Study This: function saveAs(filename, allHtml) 

This .html page will be saved in your Browser's download area .
Since the "Restore this from Pre" pre area , is coded as  contenteditable="true" , 
the downloaded page will save the "pre area" text as innerHTML . 
A nifty feature of  'contenteditable' is  
that upon opening the saved-page the content of "pre area"  is now " hardCoded " into page . 

Study This: function onloadRestoreTextarea() 
------------------------------------------------------------------------------------------------------------------------

See code :
So in the  ' body '  tag we have :  "onloadRestoreTextarea()"  
which runs the  " function onloadRestoreTextarea() " code , when page is loaded . 
Which copies text from "pre area" to " textarea" box . 

Also at  ' body onload="documentURL() ' page load time: 
The function:  function documentURL()   is run ,
which copies ' this .html '  file's address  into the ' title ' tag . 

BTW:  for example (see code) and note that :
IF you want to copy what’s typed in the box use .value .
console.log(toConsoleLogId.value); 

IF you want what was hardcoded into the text box’s HTML , use .innerHTML .
console.log(toConsoleLogId.innerHTML); 

Hope this helps someone....
http://vmars.us/ShowMe/Tutorial-Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore-RO-VM.html
</pre>
</div>

<script>
var copyFromVar = "one"; 
function saveItAll() {
  var blankVar = "";
  var fromList; //  = document.getElementsByClassName("copyFrom");
  var intoList;  //  = document.getElementsByClassName("pasteInto");
  fromList   = document.getElementsByClassName("copyFrom");
  intoList    = document.getElementsByClassName("pasteInto");

  for (var i = 0; i < fromList.length; i++) {
    copyFromVar = fromList[i].value ;
    intoList[i].innerHTML   = copyFromVar;
    fromList[i].innerHTML   = blankVar;
    fromList[i].value   = blankVar;
  }
}//
</script> 

<script>
var copyFromVarTwo = "two"; 

function restoreItAll() {

  var blankVar = "";
  var fromListTwo; //  = document.getElementsByClassName("copyFrom");
  var intoListTwo;  //  = document.getElementsByClassName("pasteInto");
  intoListTwo   = document.getElementsByClassName("copyFrom");
  fromListTwo    = document.getElementsByClassName("pasteInto");

  for (var i = 0; i < fromListTwo.length; i++) {
  copyFromVarTwo = fromListTwo[i].innerHTML ;
  intoListTwo[i].value   = copyFromVarTwo;
  
  copyFromVarTwo = fromListTwo[i].innerHTML ;
  intoListTwo[i].value   = copyFromVarTwo;
  fromListTwo[i].innerHTML   = blankVar;
  fromListTwo[i].value   = blankVar;
  }
}
</script>

<script>
 var copyFromVarOnload = "three"; 
 
function onloadRestoreTextarea() {

  var fromListTwo; //  = document.getElementsByClassName("copyFrom");
  var intoListTwo;  //  = document.getElementsByClassName("pasteInto");
  var blankVar = "";
  intoListTwo   = document.getElementsByClassName("copyFrom");
  fromListTwo    = document.getElementsByClassName("pasteInto");

  for (var i = 0; i < fromListTwo.length; i++) {
  copyFromVarTwo = fromListTwo[i].innerHTML ; 
  intoListTwo[i].value   = copyFromVarTwo; 
  
  copyFromVarTwo = fromListTwo[i].innerHTML ;
  intoListTwo[i].value   = copyFromVarTwo; 
  fromListTwo[i].innerHTML   = blankVar;
  fromListTwo[i].value   = blankVar;
  }
} // reloadTextarea
</script>

<script>
         function sendToConcoleLog() {
         
         var  var01 = toConsoleLogId.value;
		 console.log(var01);
//		 alert(var01);
         
         var  var01 = toConsoleLogId.innerHTML;
		 console.log("If nothing after : Then no nothing was typed into this textarea => " + var01);
		 alert("If nothing after : Then no nothing was typed into this textarea => " + var01);
console.log(toConsoleLogId.value); 

console.log(toConsoleLogId.innerHTML);
 /*
should be
console.log(toConsoleLogId.value); if you want what’s typed in the box, or
console.log(toConsoleLogId.innerHTML); if you want what was hardcoded into the text box’s HTML.
*/
		 }
</script>
<script>
         var  filename = "";
         
         function documentURL() {
         
         document_URL = document.URL;
         document.getElementById("titleId").innerHTML = document_URL;  
         }
</script>

<script>
	     var filename = "Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore.html"; 
         var allHtml =  document.documentElement.outerHTML; 
         
         function saveAs(filename, allHtml) {
         
           allHtml =  document.documentElement.outerHTML; 
          var blob = new Blob([allHtml], {type: 'text/csv'});
          if(window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveBlob(blob, filename);
          }
          else{
              var elem = window.document.createElement('a');
              elem.href = window.URL.createObjectURL(blob);
              elem.download = filename;        
              document.body.appendChild(elem);
              elem.click();        
              document.body.removeChild(elem);
          }
         }    
</script> 

  </body>
</html>

 

Edited by vmars316
  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...