botón Desactivar siempre que un campo de texto está vacío dinámicamente

Aquí está mi código:botón Desactivar siempre que un campo de texto está vacío dinámicamente

<input type="text" onkeyup="if(this.value.length > 0) document.getElementById('start_button').disabled = false; else document.getElementById('start_button').disabled = true;"/> 
<input type="button" value="Click to begin!" id="start_button" disabled/>

Esto funciona, pero todavía no es eficiente ya que el usuario puede borrar el texto dentro del cuadro de texto y haga clic en el botón mientras que está sosteniendo en la tecla BORRAR . ¿Hay alguna manera más eficiente de lograr esto usando javascript?

Fuente

2011-08-15 Eng.Fouad

Agregue un cheque cuando se hace clic en el botón para ver si hay algún texto. De lo contrario, abra un cuadro de alerta (u otro tipo de comentarios) para indicarle al usuario que ingrese datos, y no haga la función del botón.

Ejemplo:

<input id="myText" type="text" onkeyup="stoppedTyping()"> 
<input type="button" value="Click to begin!" id="start_button" onclick="verify()" disabled/> 

<script type="text/javascript"> 
    function stoppedTyping(){ 
     if(this.value.length > 0) { 
      document.getElementById('start_button').disabled = false; 
     } else { 
      document.getElementById('start_button').disabled = true; 
     } 
    } 
    function verify(){ 
     if myText is empty{ 
      alert "Put some text in there!" 
      return 
     } 
     else{ 
      do button functionality 
     } 
    } 
</script>

Fuente

2011-08-15 15:37:49 yoozer8

+1 Esto también funciona si el usuario utiliza el menú contextual para eliminar el valor del cuadro de texto. – pimvdb

¿Por qué el voto a favor? – yoozer8

Se podría sondear el valor de la entrada. Esto sería menos eficiente y menos receptivo, pero potencialmente más confiable.

Como ha señalado, el evento de teclado no necesariamente se activará cuando se borre el valor de una entrada. ¿Qué sucede si resaltan el texto con el mouse, hacen clic derecho y cortan?

El evento de cambio puede ayudar, pero todavía no es tan confiable. Solo se dispara con desenfoque y omite algunos cambios (como una selección de autocompletado).

Aquí está a jsFiddle que demuestra la solución de sondeo.

En respuesta al comentario de Eng.Fouad, aquí es cómo agregar el JS:

Se puede poner en una etiqueta de script, como esto:

<script type="text/javascript"> 
    //my code 
</script>

que funcionará, pero significará que el navegador de su usuario no guardará en caché el JavaScript, lo que significa que tardará más tiempo en cargar su página. También es más limpio separar las secuencias de comandos de su contenido. Pero si quieres una opción rápida y fácil, esto debería funcionar. Pon esto en la parte inferior de tu cuerpo y envuélvelo en un manejador dom ready (mira la parte inferior de la respuesta).

Como una opción más limpia, puede colocarla en un archivo externo, p. someScript.js, cuyo contenido sería su JavaScript (sin etiquetas de script). A continuación, enlace a esa secuencia de comandos desde el archivo HTML:

<html> 
    <head></head> 
    <body> 
     <!-- contents of page --> 
     <script type="text/javascript" src="/path/to/someScript.js"></script> 
    </body> 
</html>

Nota: Es necesario para que su web guión accesible para que la navegación a http://www.your-site.com/path/to/someScript.js accede a este script.

La etiqueta de secuencia de comandos se encuentra en la parte inferior del cuerpo para que la página cargue primero el contenido real y luego los scripts. Esto significará que su contenido estará visible para sus usuarios antes.

Debe hacer una última modificación al JavaScript en jsFiddle. JsFiddle tiene el código ejecutando "onDomReady" (ver arriba a la izquierda del violín). Técnicamente, no necesita hacer esto si tiene su secuencia de comandos después de su contenido. Está allí para garantizar que la secuencia de comandos se ejecuta después de que se haya cargado el contenido, de modo que si la secuencia de comandos intenta encontrar elementos en el DOM, se hayan cargado y se encuentren. Probablemente deberías agregar esto al guión por si acaso (por alguna razón) mueves el guión antes del contenido.Con el fin de envolver su escritura en un controlador listo Dom en jQuery, haga lo siguiente:

$(function(){ 
    //my code 
});

En este ejemplo, el código puesto que el comentario se //my code se llevará a cabo sólo si la página está lista.

Fuente

2011-08-15 15:56:06 Spycho

Lo siento, todavía soy principiante, pero ¿dónde debería poner el código de JavaScript? Traté de agregarlo en las etiquetas de script, pero me da errores –

Probablemente deberías ponerlo en un archivo JS y también envolverlo en un manejador listo para documentos (para que no se ejecute antes de que el contenido de la página se haya cargado). Luego, en el archivo HTML, agregue una etiqueta de script con un atributo src que sea la URL del archivo JS. Es común poner esta etiqueta de script en la parte inferior de la página, de modo que el contenido de la página se cargue primero. Actualizaré mi respuesta con una explicación más completa. – Spycho

<input type="number" id="abc" onkeyup="s()"> 
<input type="submit" id="abc2" disabled > 
<script type="text/javascript"> 
function s(){ 
var i=document.getElementById("abc"); 
if(i.value=="") 
    { 
    document.getElementById("abc2").disabled=true; 
    } 
else 
    document.getElementById("abc2").disabled=false;}</script>

Fuente

2017-07-10 07:00:37

botón Desactivar siempre que un campo de texto está vacío dinámicamente

Respuesta

Cuestiones relacionadas