Necesito copiar el valor del campo de entrada al portapapeles. En lugar de obtener el valor del campo de entrada, obtengo un valor nulo.
Aquí está mi código:
<input type="text" value=${model.anchor_url} id=${properties.anchor_name}> <button class="c-button" onclick="myFunction()"> <span class="c-button__label">Copy</span> </button> <div data-sly-test="${model.anchor_url}"> <p>URL from Model :</p> <pre>${model.anchor_url}</pre> </div> function myFunction() { const field = document.getElementById(`${properties.anchor_name}`); navigator.clipboard.writeText(field); alert("Copied the text to clipboard: " + field); } El valor de la variable de field resulta nulo a pesar de que la identificación existe y tiene un valor.
Está tratando de copiar el elemento, en lugar de su Valor, debe obtener su Valor usando element.value , también si el valor de la variable de field es nulo, esto significa que el Elemento que está tratando de obtener no existe con ese Elemento IDENTIFICACIÓN
Y también, estaba tratando de copiar todo el elemento en lugar de su valor, así que reemplace la primera línea en su función con esta:
const field = document.getElementById(properties.anchor_name).value;¡Además, no hay necesidad de poner literales de plantilla en su código, ya que también puede hacerlo sin eso!
Por ejemplo, suponga que hay una variable element_ID que se puede escribir en JS de esta manera:
var element_ID = "myInput"ahora quiero obtener ese elemento, así que puedo hacer esto directamente:
document.getElementById(element_ID)en lugar de esto:
document.getElementById(`${element_ID}`)Obtienes un Objeto con esta línea: document.getElementById( ${properties.anchor_name} ) . Con el value del parámetro obtendrá el valor del campo de entrada.
Así que tienes que probar:
const field = document.getElementById(`${properties.anchor_name}`).value;Gracias por toda la ayuda. Parece que debido a la prevención de secuencias de comandos entre sitios, JS no se puede ejecutar desde html para el sitio que desarrollo, pero debe construirse con TypeScript.