function Hello() { var text_to_copy = document.getElementById("quote").innerHTML; navigator.clipboard.writeText(text_to_copy).then( function(){ alert("Copied successfully"); // success }) .catch( function() { alert("Error"); // error }); }Quiero que el código muestre "Copiado correctamente" o "Error" en lugar de mostrarse en el cuadro de alerta
Un mensaje de snack bar/brindis funcionaría perfectamente. Pero deberá codificar su propia implementación para ello ofc.
Un ejemplo de cómo implementar esto:
HTML:
<span id="snackbar">Successfully Copied</span>CSS:
#snackbar { visibility: hidden; color: #fff; background-color: #333; min-width: 250px; margin-left: -125px; border-radius: 2px; padding: 16px; text-align: center; left: 50%; bottom: 30px; z-index: 1; position: fixed; } /* This will be activated when the snackbar's class is 'show' which will be added through JS */ #snackbar.show { visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s; } /* Animations for fading in and out */ @-webkit-keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} } @keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} } @-webkit-keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} } @keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} }JavaScript:
function showSnackBar() { var sb = document.getElementById("snackbar"); //this is where the class name will be added & removed to activate the css sb.className = "show"; setTimeout(()=>{ sb.className = sb.className.replace("show", ""); }, 3000); }Puede editar y diseñar a su gusto. (ofc, idealmente, debería editar esto para pasar cualquier mensaje de cadena que desee que muestre Snackbar / toast, algo que dejé para que lo disfrute)