Tengo un cuadro de texto en un sitio web que muestra un número de teléfono. Me gustaría tener un enlace al lado del cuadro de texto (o debajo, no importa) que diga "Haga clic para llamar". Quiero que ese enlace llame a cualquier número de teléfono que se muestre en el cuadro de texto, pero no sé cómo poner ese número en el elemento tel:. ¿Puedo simplemente tomar el nombre del cuadro de texto y ponerlo como "tel:"?
Aquí está el cuadro de texto:
<input name="txtPhone" type="text" id="txtPhone" onkeydown="javascript:ShowSave();" onchange="javascript:ShowSave();" style="width:120px;">¿Puedo hacer algo como esto:
<a href="tel:[txtPhone]" >Click to call</a>¿O no es posible o tendría que cambiar el tipo de entrada a "tel:"?
Me disculpo de antemano ya que mi conocimiento de html es extremadamente limitado.
En la solución a continuación, el valor de la variable phoneValue se actualiza siempre que haya una entrada de datos en el elemento <input> . Cuando se activa el evento de clic del elemento <a> , al atributo href del elemento <a> se le asigna el número de teléfono ingresado en el elemento <input> . Complete el método isValid() para verificar el número de teléfono.
let inputElement = document.getElementById('txtPhone'); let phoneLinkElement = document.getElementById('tel'); let phoneValue; /* User input can be validated within this method. */ function isValid(){ return true; } /* This method fires when data is input to the <input> element. */ inputElement.addEventListener('input', function() { phoneValue = this.value; console.log(`Current User Input: ${phoneValue}`); }); /* This event fires when the <a> element is clicked. */ phoneLinkElement.addEventListener('click', function() { if(isValid()){ phoneLinkElement.href = `tel: ${phoneValue}`; } }); #txtPhone { width: 120px; } <input name="txtPhone" type="text" id="txtPhone"> <a id="tel" href="">Tel</a>Puede tener una función JS que se ejecute cuando el usuario haga clic en el enlace Hacer clic para llamar, que obtendrá la entrada del número y lo configurará como href. El fuelle se puede ampliar para incluir la validación y así sucesivamente.
<input type="text" placeholder="Telephone" id="telInput"> <a href="#" id="tel" onclick="changeHref()">Click to call</a> <script> function changeHref(){ // Selecting the input element and get its value let inputVal = document.getElementById("telInput").value; // Set it for the href document.getElementById("tel").setAttribute("href", `tel:${inputVal}`); // Test console.log(inputVal); } </script>