How to convert text to copyable?

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

Hi @Luis_Mb,

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

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?

1 Like

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

1 Like