Deshabilitar Text

[thi]

Hola a todos,

tengo un formulario con 4 text y necesito que al escribir algo en cualquiera de ellos me deshabilite el resto y si se borra el contenido que se estaba escribiendo quedando el text en blanco tiene que volver a activar los otros texts, esto lo quiero utilizar para hacer busquedas de forma que sólo pueda buscar por un campo de cada vez.

Un saludo.

[buzu]

puedes usar un onchange en los cuatro por ejemplo:

Por que no mejor usas una combinación entre una lista desplegable (<select>) y un solo campo de texto? Esto pensando en que lo que quieres hacer es lo siguiente:

Buscar:
Por Autor (___________________)
Por Genero (__________________)
Por Editorial (_________________)
Por Titulo (___________________)

De la forma en que yo te digo, tendrías solo una caja de texto:

Buscar:(__________________) por SELECT

En donde SELECT da la opción de seleccionar si se quiere buscar por autor, por genero, por editorial, o por titulo. De esta forma logras ocupar menos espacio y creo que se ve más elegante.

[gioramies]

Hola, sería mejor si lo hicieras con un <select> y un <input>. El usuario selecciona del select el campo que en el que desea buscar y el el input coloca el texto a buscar.

Si deseas hacerlo únicamente son <input> tendrías que utilizar el evento onkeypress en cada uno de ellos y eliminar el contenido que hay en los demás input excepto en el que se está escribiendo.

Saludos. Te recomiendo la primera opción.

[gioramies]

Vaya que son rápidos para contestar. Es lo mismo que dice buzu.

[buzu]

UPS! Chocamos... segundo choque del día.

Solo aclarar que si se decide por los inputs lo mejor es checar por el evento change y no el keypress ya que keypress se activa más veces consumiendo más recursos, mientras que on change generalmente se activa cuando el input pierde el foco y a cambiado su valor.

[buzu]

Y volvimos a chocar... disculpa por tanto choque jajaja ya me lesione una pierna jajaja

[gioramies]

Hola buzu. Las razones por la que opté por el evento onkeypress (aunque sería mejor onkeyup ) son los siguientes eventos:

1. La primera vez que el usuario escriba en un campo, automáicamente se desactivan los otros si utiliza el evento onkeypress, si utiliza onchange, es probable que el campo actual pierda el foco cuando el usuario se lo estaba dando a otro campo (que se desactivaría de una vez). Si esto me sucediese a mi.......¿qué pasa con este sitio web?
2. Si el usuario borra el contenido de ese campo, los otros aún permanecerán desactivados mientras esté en ese campo y este no pierda el foco. Yo considero que si está en blanco, los demás deben activarse.
3. Si el campo está en blanco y los demás no se activan, viene la pregunta que se haría el usuario: "¿y ahora que? ¿por qué no se activan los otros campos? ¿ya no puedo escribir en los otros?" Y obviamente si da click en otro campo, estos no obtendrán el foco, así que permanecerá allí por siempre, a menos que de click en otro lugar de la página.

..............En fin, después de todo la mejor opción es el <select>, hay que ver thi la elije.

Saludos.

[buzu]

Si, tienes razón. Probablemente onkeyup sea mejor ya con todo ese análisis. jeje.
Pero esperemos que mejor se decida por la del select y el input

[thi]

Gracias por vuestras respuestas,

no choqueis tanto que os vais a lesionar.

Os voy a hacer caso en utilizar un <select> y un <input>, pero no obstante me gustaría que el input estuviera desactivado hasta que no se seleccione una opción de busqueda en el select(por defecto pongo en los select como opción seleccionada "Selecciona..."). Lo de utilizar onKeyup u onChange me parece bien pero el problema es que no se cual es la propiedad de los elementos para que esten desactivados.

Y ya para que quedara estupendo tambien me gustaría que me puesiera el cursor en el input automaticamente al seleccionar una de las opciones del select.

Todo esto con Visual Basic es una chorrada, pero con esto de Javascript no lo controlo mucho.

Un saludo.

[KiraSakuya]

Usa esto :)

document.getElementById("IdDeTuTextBox").focus()

En el evento onchange del select :)

[gioramies]

Iniciado por KiraSakuya

Usa esto :)

document.getElementById("IdDeTuTextBox").focus()

En el evento onchange del select :)

thi, KiraSakuya ha dado la solución a lo que planteas, sin embargo, creo que no sabes mucho Javascript (como lo has dicho), por lo que trataré de darte el ejemplo que necesitas para que despegues un poquito tu aprendizaje en el lenguaje:

1. Debes asociar los eventos respectivos a cada control del formulario:

HTML

Código HTML:

<select id="criterios" name="criterios" onchange="activarCampo()" >
  <option value="" selected="selected">- selecciona -</option>
  <option value="nombre">Nombre</option>
  <option value="apellido">Apellido</option>
  <option value="edad">Edad</option>
  <option value="sexo">Sexo</option>
</select>

<input type="text" id="valor" name="valor" value="" disabled="true" onkeyup="activarBoton()"/>

<input type="button" id="enviar" name="enviar" disabled="true" onclick="validarCampos()" value="Buscar" /> 

2. Desarrollar las funciones asociadas a los eventos:

Código HTML:

// Funcion que verifica si se ha seleccionado un criterio de búsqueda para luego activar el input

function activarCampo() {
    // Obtener la referencia a la lista
    var lista = document.getElementById("criterios");
 
    // Obtener el índice de la opción que se ha seleccionado
    var indiceSeleccionado = lista.selectedIndex;

    if (indiceSeleccionado != 0) {
         document.getElementById("valor").disabled = false;
         document.getElementById("valor").focus()
    }
    else {
         document.getElementById("valor").disabled = true;
         document.getElementById("buscar").disabled = true;
    }
}

// Funcion que verifica si se ha seleccionado un criterio de búsqueda y si se ha escrito algo en el input, para luego activar el boton submit

function activarCampo() {
    var valor = document.getElementById("valor");
 
    if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) {
         document.getElementById("buscar").disabled = true;
         return false;
    }
    else {
         document.getElementById("buscar").disabled = false;
    }
}

3. Luego enviar el formulario

Código HTML:

function validarCampos() {
    // Obtener la referencia a la lista
    var lista = document.getElementById("criterios");
 
    // Obtener el índice de la opción que se ha seleccionado
    var indiceSeleccionado = lista.selectedIndex;

    // Con el índice y el array "options", obtener la opción seleccionada
    var opcionSeleccionada = lista.options[indiceSeleccionado];
 
    // Obtener el valor y el texto de la opción seleccionada
    var textoSeleccionado = opcionSeleccionada.text;
    var valorSeleccionado = opcionSeleccionada.value; //

    // Valor a buscar
    var valorBuscar = document.getElementById("valor");
 

    // Si lo deseas realizas verificaciones para saber si el criterio de búsqueda corresponde con el valor a buscar
   // Un ejemplo es que si vas a buscar por fecha debes escribir una fecha, si vas a buscar por DNI, debes escribir realmente un DNI
    if ( valorSeleccionado == "nombre" ) {
      ........//
    }

    if ( valorSeleccionado == "apellido" ) {
      ........//
    }
}

Espero haber podido ayudarte. Saludos.

[thi]

Gracias gioramies,

estoy aprendiendo mucho de gente tan enrollada como tú.

Un saludo.