How to convert text to copyable?

[Luis_Mb]

Hi guys

I am triying show text in html on screen (about rotation of an entity) and i need that text is “selectable” and “copyable” This works a bit in mozilla but not in chrome. Some ideas?

var HtmlHandler = pc.createScript('htmlHandler'); 

HtmlHandler.attributes.add('html', { type: 'asset', assetType: 'html' });

HtmlHandler.prototype.initialize = function() {
  this.element = document.createElement('div');
  this.element.classList.add('container');
  document.body.appendChild(this.element);
  
 ////////////////////777 this.text = ''; 
 ////////////////////////////////// this.prevText = ''; // inicializar con cadena vacía

  // hacer el texto seleccionable y copiable
  this.element.style.pointerEvents = 'auto';

  // Hacer texto seleccionable
  this.element.style.userSelect = 'text';
  
  // Para Chrome/Safari
  this.element.style.webkitUserSelect = 'text'; 

  // estilos comunes
  this.element.style.cssText = `
    font-size: 12px; 
    color: rgba(250, 250, 250, 1);
  `;
  
  // estilos de posicionamiento
  this.element.style.cssText += `
    position: fixed; 
    left: 0; 
    top: 0; 
    white-space: nowrap;
  `;
};

HtmlHandler.prototype.template = function(asset, html) {
  this.asset = asset;
  this.element.innerHTML = html || '';
};

HtmlHandler.prototype.update = function(dt) {
  if (this.assetId !== this.html.id) {
    this.app.assets.load(this.html);
    this.template(this.html, this.html.resource); 
  }

  this.updateRotation();
};

HtmlHandler.prototype.updateRotation = function() {
  var rot = this.entity.getLocalRotation();

  var prevText = this.text;
  this.text += 'X: ' + rot.x.toFixed(2) + ' Y: ' + rot.y.toFixed(2) + ' Z: ' + rot.z.toFixed(2) + ' ';
  
  this.element.textContent = prevText + this.text;
}

[Leonidas]

Hi @Luis_Mb,

Usually I have the opposite problem on my HTML UI, how to make the text not selectable

By default all text in HTML elements is selectable, unless there is either an element over the text consuming all input events or the text has the user-select: none; rule.

Can you double check that neither is the case?

[Albertos]

I can confirm that the HTML text used in a PlayCanvas tutorial is selectable and copyable in Google Chrome.