"HTML/CSS - Live Updates" ... with use of <input>

I am trying to rewrite the “HTML/CSS - Live Updates” tutorial example in such a way that I can paste the clipboard content into a hidden textfield, for then to throw into the 3d-layer (in a textfield that is indep, of the javascript HTML positioning etc):

This is my HTML file:

<div class='button'>BUTTON</div>
<div class='counterBox'>    times clicked <span class='counter'>0</span></div>
<div class='text'></div>
<div class='hiddenText'>Test</div>
<form name="form1" method="post" action="" class='myInputForm'> 
<input type="text" class='myInput' value="StartValue"> </input>
  • and this is the most vital parts of the htmlHandler.js file:
HtmlHandler.prototype.initialize = function() {
    // create DIV element
    this.element = document.createElement('div');

    // append to body
    // can be appended somewhere else
    // it is recommended to have some container element
    // to prevent iOS problems of overfloating elements off the screen
    this.elementINPTT = document.createElement('input');

and further down the script:

HtmlHandler.prototype.bindEvents = function() {
    var self = this;
    var txtField = self.elementINPTT.querySelector('.myInputForm'); console.log("txtField  :" +txtField );
    var txtField5 = self.elementINPTT.querySelector('.myInputForm').innerHTML; console.log("txtField5  :" +txtField5 );
    var tmpTxt00 = self.elementINPTT.querySelector('.myInput'); var tmpTxt000 = self.elementINPTT.querySelector('.myInput').ELEMENT_NODE;
    console.log("tmpTxt000  :" +tmpTxt000 );
    // var objTF = self.app.root.findByName("TFin"); console.log("objTF :" +objTF.name);
    var app = pc.Application.getApplication();
    var objTF = app.root.findByName("TFin"); console.log("objTF :" +objTF.name);

I might also have to us the update-part, in order to retrieve/catch the sudden paste-action (?)

Found a solution myself in regards to textfield reading ->> Approach for those interested:


.container > #mainDiv     { position: absolute;  display: inline-block;  width: 6%;   height: 4%;    padding: 0 4px;             top:12%; left:12%; z-index: 3;}
.container > .btn    { position: absolute;  display: inline-block;  width: 6%;   height: 4%;    padding: 0 4px;            background-color: #435;   top:20%; left:12%; z-index: 3;}


<div id="mainDiv"> 
<input type="text" value="Here is the text" /> 
<div class="btn" value="Push">Button</div>

JS-part (PC-readable):

   var txtField = this.div.querySelector('#mainDiv');
    var TF_SQbutton = self.div.querySelector('.btn');
		if (TF_SQbutton) { console.log("INS1");
        // add event listener on `click`
        TF_SQbutton.addEventListener('click', function() {  
                                                        var tmpTxt000 =  txtField.children[0].value;
etc ...