0

os comento, estoy con el desarrollo de un sistema en JavaScript, HTML y CSS, y son dos partes, una el cliente de escritorio y otra el móvil. El caso es que ya estuve preguntando sobre el cliente móvil, con el objetivo de deshabilitar el teclado al pulsar sobre un input, es decir, que no apareciera cuando pulso sobre el input, ya que dichos inputs se completarían con tags NFC. Me respondieron con la opción de poner en la input readonly, sin embargo, aunque funciona, ahora no sé si estoy pulsando sobre un input o no, es decir, no me aparece ningún efecto sobre que me encuentro en dicho inputs. La otra pregunta es esta: deshabilitar que aparezca el teclado en un input. Mi pregunta es, sobre si existe la posibilidad de que se vea que se ha pulsado sobre un input y que vas a escribir sobre el mismo. ¿Alguna forma con CSS quizás? El código es el siguiente:

mostrarEjercicio:function (nombreEjercicio,textoEjercicio){
  var text=textoEjercicio;
  var textSeparado=textoEjercicio.split("@");
  var nInput=textSeparado.length-1;
  var idInput=0;
  for (var i=0;i<text.length;i++){
  // Mostrar inputs en función de textoEjercicio
    if(text.charAt(i)=="@"){
      var inputN='<input id="'+idInput+'" type="text" readonly style="width:20px; color:green; font-size: 26pt ">'
      text = text.replace("@", inputN);
      idInput++;
    }
  }

  var cadena = '<div id="mostrarTextoAlumno" align="center"><h3>'+ nombreEjercicio +'</h3><div class="card-panel cyan lighten-5"><h4 style="color:black;">'+ text + '</h4></div>';
  cadena=cadena+'<div align="center" id="mostrarSolucion">';
  cadena=cadena+'<button id="verBorradorBtn" class="btn waves-effect waves-light" type="submit">Ver borrador<i class="material-icons right">edit</i></button> ';
  cadena=cadena+'</div></div>';
  $('#messageDiv').append(cadena);

  var respuestaAlumno=[];
  var respuestaAlumnoC;


  $('#verBorradorBtn').on('click',function(){
    respuestaAlumno=[];
    for (let i=0; i<idInput;i++) {
       respuestaAlumno.push($(`#${i}`).val());
    }
  ///////////////// Código por completar del onclick \\\\\\\\\\\\
  });
},

1 respuesta 1

1

En CSS puedes usar la pseudo-clase :focus

La pseudo-clase :focus CSS representa un elemento (como una entrada de formulario) que ha recibido el foco. Generalmente se activa cuando el usuario hace clic, toca un elemento o lo selecciona con la tecla "Tab" del teclado

Podrías tener algo así como:

input {
  transition: 0.3s; /* Hace que las animaciones duren 0.3 segundos */
  width: 80px;
}

input:focus {
  width: 160px; /* Cuando se selecciona este elemento crece a 160px */
}
<input type="text" readonly></input>

Luego puedes hacer más animaciones, como ponerle sombreado y cosas así para que parezca más que se ha seleccionado.

input {
  border: 0;
  border-bottom: 2px solid grey;
  outline: 0;
  transition: 0.3s; /* Hace que las animaciones duren 0.3 segundos */
  width: 80px;
}

input:focus {
  box-shadow: 2px 2px 4px 0px grey;
  width: 160px; /* Cuando se selecciona este elemento crece a 160px */
}
<input type="text" readonly />

Y aquí tienes más ejemplos (eso sí, en inglés).

1
  • Se puede utilizar independientemente de la librería que utilices imagino. En mi caso materialize. Muchas gracias, voy a probar Commented el 17 abr. 2019 a las 12:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.