How to take text from this input?

var Input = pc.createScript('input');

Input.attributes.add('placeholder', { type : 'string' });
Input.attributes.add('type', {
    type: 'string',
    enum: [
        { 'Text': 'text' },
        { 'Email': 'email' },
        { 'Password': 'password' }
    ],
    default : 'text'
});
Input.attributes.add('maxLength', { type : 'number', default : 64 });
Input.attributes.add('fontSize', { type : 'number', default : 1 });
Input.attributes.add('padding', { type : 'number', default : 1 });
Input.attributes.add('scaleUnit', {
    type: 'string',
    enum: [
        { 'Viewport Width': 'vw' },
        { 'Viewport Height': 'vh' },
        { 'Pixel': 'px' }
    ],
    default : 'vw'
});
Input.attributes.add('color', { type : 'rgb' });
Input.attributes.add('whitePlaceholder', { type : 'boolean' });
Input.attributes.add('fontFamily', { type : 'string', default : 'Arial, sans-serif' });
Input.attributes.add('storeValue', { type : 'boolean' });

Input.attributes.add('focusEntity', { type : 'entity' });
Input.attributes.add('sleepValue', { type : 'string' });
Input.attributes.add('blurFunction', { type : 'string' });

Input.prototype.initialize = function() {
    this.timeout = false;
    this.isDestroyed = false;
    
    this.currentWidth = 0;
    this.currentHeight = 0;
    
    this.element = document.createElement('input');
    this.element.placeholder = this.placeholder;
    
    this.element.type = this.type;
    
    this.element.style.position = 'absolute';
    this.element.style.fontFamily = this.fontFamily;
    
    this.element.style.border = '0px';
    this.element.style.background = 'transparent';
    
    this.element.style.fontSize = this.fontSize + this.scaleUnit;
    this.element.style.padding = this.padding + this.scaleUnit;
    this.element.style.boxSizing = 'border-box';
    
    if(this.maxLength > 0){
        this.element.maxLength = this.maxLength;
    }
    
    var color = 'rgb(' + (this.color.r * 255) + ', ' + (this.color.g * 255) + ', ' + (this.color.b * 255) + ')';
    this.element.style.color = color;
    
    this.element.style.outline = 'none';
    
    if(this.whitePlaceholder){
        this.element.className = 'white-placeholder';
    }
    
    document.body.appendChild(this.element);
    
    //disable focus entity
    if(this.focusEntity){
        this.focusEntity.enabled = false;   
        
        this.element.onfocus = this.onFocus.bind(this);
        this.element.onblur = this.onBlur.bind(this);
    }
    
    if(this.blurFunction){
        this.element.onblur = this.onBlurFunction.bind(this);
    }
    
    this.element.onchange = this.onChange.bind(this);
    
    //if(this.storeValue){
        var value = window.localStorage.getItem(this.entity._guid);
        
        if(value){
            this.setValue(window.localStorage.getItem(this.entity._guid));   
        }
    //}
    
    this.updateStyle();
    
    this.app.on('DOM:Clear', this.onDOMClear, this);
    this.app.on('DOM:Update', this.onDomUpdate, this);
    this.app.on('Input:' + this.entity.name, this.setResultValue, this);
    
    if(this.sleepValue){
        this.setValue(this.sleepValue);
    }
    
    this.on('state', function(self){
        if(this.entity.enabled){
            this.element.style.display = 'block';
        }else{
            this.element.style.display = 'none'; 
        }
    }, this);
    
    this.on('destroy', function(self){
        this.onDestroy();
    }, this);
};

Input.prototype.onBlurFunction = function(){
    var blurFunctions = this.blurFunction.split(', ');

    if(blurFunctions.length > 0){
        for(var blurIndex in blurFunctions){
            var blurFunction = blurFunctions[blurIndex];
            var parts = blurFunction.split('\@');
            var key   = parts[0];

            if(parts.length > 1){
                var value = parts[1];

                this.app.fire(key, value);
            }else{
                this.app.fire(key);
            }
        }
    }
};

Input.prototype.onDOMClear = function(){
    this.entity.destroy();  
};

Input.prototype.onDestroy = function(){
    this.isDestroyed = true;
    this.element.remove();
};

Input.prototype.store = function() {
    this.storeValue = true;
    this.onChange();
};

Input.prototype.onFocus = function() {
    this.focusEntity.enabled = true;
};

Input.prototype.onBlur = function() {
    this.focusEntity.enabled = false;
};

Input.prototype.onChange = function() {
    if(this.storeValue){
        window.localStorage.setItem(this.entity._guid, this.getValue());
    }
};

Input.prototype.onDomUpdate = function(){
    this._updateStyle();
};

Input.prototype.updateStyle = function() {
    if(
        this.currentWidth == window.innerWidth &&
        this.currentHeight == window.innerHeight
    ){
        return false;
    }
    
    this._updateStyle();
    
    this.currentWidth = window.innerWidth;
    this.currentHeight = window.innerHeight;
};

Input.prototype._updateStyle = function() {
    if(this.isDestroyed){
        return false;
    }
    
    var self = this;
    
    if(self.entity && self.entity.element && self.entity.element.screenCorners){
        var position = self.entity.element.screenCorners;
        var ratio = 1 / self.app.graphicsDevice.maxPixelRatio;

        self.element.style.left = position[0].x * ratio + 'px';
        self.element.style.bottom = position[0].y * ratio + 'px';

        self.element.style.width = (position[2].x - position[0].x) * ratio + 'px';
        self.element.style.height = (position[2].y - position[0].y) * ratio + 'px';
    }
};

Input.prototype.setResultValue = function(data) {
    if(!data){
        return false;
    }
    
    var value = data.result;
    
    if(!this.element){
        this.sleepValue = value;
    }else{
        this.element.value = value;
        this.sleepValue = false;
    }
};

Input.prototype.setValue = function(value) {
    if(!this.element){
        this.sleepValue = value;
    }else{
        this.element.value = value;
        this.sleepValue = false;
    }
};

Input.prototype.getValue = function() {
    if(this.element){
        return this.element.value;   
    }
};

Input.prototype.focus = function() {
    if(this.element){
        this.element.focus();
    }
};

Input.prototype.blur = function() {
    if(this.element){
        this.element.blur();
    }
};

Hi @Stishka,

Can you be more specific regarding the issue you are facing?

I can see you have a long script in place, what’s working and what’s not in your case?

In general to read the value of a text element you do this:

const text = this.entity.element.text;

this.getValue();