Bloquear caja de texto en HTML

Bienvenidos a VerTutoriales.com en esta ocasión vamos a resolver la duda de un compañero de esta comunidad de formación. ¿Cómo bloquear una caja de texto en HTML? En este caso tenemos dos opciones dependiendo de la necesidad, veamos.

La primera es bloquear la caja y ponerla en modo solo lectura

<input type=»text» readonly=»readonly» />

De esta forma se bloquearía la caja de manera que no pudiera escribirse en ella, ni modificarse ni nada, simplemente mostraría la información de forma estandar.

La siguiente es poniendo como deshabilitada la caja

<input type=»text» disabled=»disabled» />

La única pega es que saldrá en grisacea.

Ya elegís cual es la manera que más se adapta a vuestra necesidad para bloquear la caja de texto.

Un saludo!

 

Carlos Dk

Apasionado por la enseñanza y el SEO

17 comentarios en “Bloquear caja de texto en HTML

  • el 14 octubre, 2012 a las 10:39 pm
    Permalink

    Vaya ! que me ha servido de mucho ^^
    muchas gracias =D
    me voy a dar una paseada por la pagina que esta muy buena

    Respuesta
    • el 16 octubre, 2012 a las 5:33 pm
      Permalink

      Nada, si tienes cualquier duda sobre HTML, ya sabes que puedes comentarla para que te ayudemos a solucionarla.

      Respuesta
  • el 17 abril, 2013 a las 7:13 pm
    Permalink

    Como puedo hacer que un usuario al loguearse solo pueda ver los datos suyos, es decir tengo una base de datos con dos tablas una para el registro de usuario y otra donde pongo varios datos segun su municipio y enseñanza, yo quiero que cuando el usuario se loguee si es de digamos Matanzas, solo pueda ver y modificar los datos de Matanzas

    Respuesta
    • el 18 abril, 2013 a las 7:59 am
      Permalink

      Buenos Miguel Angel

      Pues tendrás que relacionar la tabla de usuarios, en este caso con «Municipio» o «Enseñanza» y en la tabla de información. Es decir, supongamos que tenemos la tabla «Usuarios» que tiene entre otros datos el campo población, además, tenemos otra tabla que se llama «Cursos» y tiene también el campo «Población» de esta manera podrás relacionar ambas tablas y hacer la consulta de la siguiente manera:

      Al logarse el usuario, sabemos que pertenece a una población en concreto. Solo tendremos que realizar una consulta tomando como dato la población del usuario:

      ‘Select * From Cursos WHERE poblacion = «‘.$poblacion_usuario.'»‘;

      Donde $poblacion_usuario es la variable donde hemos guardado la población en una consulta anterior cuando el usuario se había logado.

      Espero que me haya explicado para que puedas usarlo.
      Un saludo!

      Respuesta
  • el 26 junio, 2017 a las 8:30 pm
    Permalink

    excelnte ayuda, apesar del año sigue funcionando, gracias =D

    Respuesta
  • el 25 julio, 2017 a las 4:06 pm
    Permalink

    muy bueno pero necesito enviar valores de un input desabilitado como lo hago disabled no me permite

    Respuesta
    • el 1 agosto, 2017 a las 3:17 pm
      Permalink

      no tiene que ver que esté disabled o enabled, la información que tenga la caja sigue siendo la misma 🙂

      Respuesta
  • el 7 diciembre, 2017 a las 5:09 pm
    Permalink

    Hola amigos de lo desconocido, tengo una duda que me esta matando. Tengo un fornulario con algunos campos incluidos select e input text y lo que quiero hacer es que cuando se seleccione un item del select se deshabiliten o habiliten algunos input text. Esto lo consegui con el disabled, pero el problema esta cuando envio la informacion del fotmulario, los inputs que deshabilito no se envian por supuesto, pero como hago para validar el hecho de no enviar informacion de algunos campos? Porque dependiendo de la opcion que seleccionó en el select, unas veces debera enviar su informacion y otras veces no.
    Probe con el read only pero al aplicarlo, no puedo manipularlo como el disabled para permitir o no permitir que escriban.
    POR FAVOR, cualquier sugerencia sera agradecida

    Respuesta
    • el 20 diciembre, 2017 a las 10:25 pm
      Permalink

      Hola!

      Se me ocurren varias opciones, que los campos los elimines y los crees al vuelo según la selección del Select, luego simplemente envías los que estén en pantalla.
      Otra opción es ocultar y mostrarlos, así puedes enviarlos todos.
      Otra más, usando javascript o por facilitarte más, JQuery, es que selecciones directamente los cambios que quieras enviar.

      En cualquiera de estos puedes tener la solución, siento no poder entenderte exactamente lo que nos indicas. Supongo que si pones un ejemplo concreto sería más sencillo. De todas maneras, lo más sencillo para manipular el DOM del html es usar javascript o JQuery como librería 😉

      Respuesta
  • el 20 abril, 2018 a las 8:35 pm
    Permalink

    Diferencias:
    Readonly = se envía el valor por medio del form. No se permite escritura.
    Disabled = no se envía el valor por medio del form. No se permite escritura.

    Respuesta
  • el 3 marzo, 2019 a las 1:59 am
    Permalink

    ¡Muchas gracias! Me fué de gran ayuda.

    Respuesta
    • el 3 marzo, 2019 a las 7:47 am
      Permalink

      Nada! no es nada complicado bloquear un input de html por código. Sobre todo cuando se conoce la respuesta 😉

      Respuesta
  • el 15 noviembre, 2019 a las 12:00 am
    Permalink

    tengo un problema ces que tengo un campo donde esta en modo readonly=»readonly» y cuando aprieto un botton me genera una contraseña y mela muestra en el campo que esta readonly=»readonly» pero al momento de guardar en la base de datos me manda el campo basio como le puedo aser para que me mande esos datos aun estando el campo bloqueado

    Respuesta
    • el 15 noviembre, 2019 a las 12:21 am
      Permalink

      Buenas!
      Pues en realidad aunque el campo sea de solo lectura, debería de dejarte tomar ese campo.

      Revisa el nombre del campo y si estás utilizando AJAX, mira en el inspector si realmente estás pasando ese campo o ya va vacío antes de pasar al backend.

      Ya me dices algo.
      Salud!

      Respuesta

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.