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

Help & Support
1

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>
</form>
  • and this is the most vital parts of the htmlHandler.js file:
HtmlHandler.prototype.initialize = function() {
    // create DIV element
    this.element = document.createElement('div');
    this.element.classList.add('container');
    //this.element.classList.add('myInput');

    // 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
    document.body.appendChild(this.element);
    
    this.elementINPTT = document.createElement('input');
    this.elementINPTT.classList.add('myInputForm');
    this.elementINPTT.classList.add('myInput');
    document.body.appendChild(this.elementINPTT);

…

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 );
    tmpTxt00.focus();
    // 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 (?)

2

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

CSS-part:

.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;}

HTML-part:

<div id="mainDiv"> 
<input type="text" value="Here is the text" /> 
</div> 
<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 ...