Jump to content

mini-Tutorial: moving text to & from <textarea> & <pre>

vmars316

By vmars316
in JavaScript

 Share

Recommended Posts

vmars316 Member

vmars316

Posted
Posted (edited)

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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...