¿Cómo evitar que el usuario escriba en el campo de texto sin deshabilitar el campo?

Lo intenté:

$('input').keyup(function() {

   $(this).attr('val', '');

});

pero elimina el texto ingresado un poco después de ingresar una letra. ¿Existe alguna forma de evitar que el usuario ingrese texto por completo sin tener que deshabilitar el campo de texto?

Una alternativa sin JavaScript que puede pasarse por alto fácilmente: ¿puede utilizar el readonlyatributo en lugar del disabledatributo? Evita editar el texto en la entrada, pero los navegadores le dan un estilo diferente a la entrada (es menos probable que la "atenúe"),<input readonly type="text" ...>

si no desea que el campo se vea "deshabilitado" o algo, simplemente use esto:

onkeydown="return false;"

es básicamente lo mismo que dijeron Greengit y Derek, pero un poco más corto

$('input').keydown(function(e) {
   e.preventDefault();
   return false;
});

$('input').keypress(function(e) {
    e.preventDefault();
});

Si desea evitar que el usuario agregue algo, pero bríndele la capacidad de borrar caracteres:

<input value="CAN'T ADD TO THIS" maxlength="0" />

Establecer el maxlengthatributo de una entrada en "0"hace que el usuario no pueda agregar contenido, pero aún así borre el contenido como lo desee .

Pero si quieres que sea verdaderamente constante e inmutable:

<input value="THIS IS READONLY" onkeydown="return false" />

Establecer el onkeydownatributo en return falsehace que la entrada ignore al usuario keypresses, evitando así que cambie o afecte el valor.

Otro método que podría usarse dependiendo de la necesidad $('input').onfocus(function(){this.blur()}); , creo que así es como lo escribirías. No soy competente en jquery.

Margen

<asp:TextBox ID="txtDateOfBirth" runat="server" onkeydown="javascript:preventInput(event);" onpaste="return false;"
                                TabIndex="1">

Guión

function preventInput(evnt) {
//Checked In IE9,Chrome,FireFox
if (evnt.which != 9) evnt.preventDefault();}

Me gusta agregar uno que también funcione con la creación dinámica de DOM javascript como D3 donde es imposible agregar:

//.attr(function(){if(condition){"readonly"]else{""}) //INCORRECT CODE !

para evitar acciones en un elemento DOM de entrada HTML, agregue readonly a la clase:

var d = document.getElementById("div1");
d.className += " readonly";

O en D3:

 .classed("readonly", function(){
   if(condition){return true}else{return false}
 })

Y agregar a CSS o menos:

.readonly {
  pointer-events: none;
}

Lo bueno de esta solución es que se puede activar y desactivar dinámicamente en una función para que pueda integrarse, por ejemplo, en D3 en el momento de la creación (no es posible con el atributo "readonly" único).

para eliminar el elemento de la clase:

document.getElementById("MyID").className =
  document.getElementById("MyID").className.replace(/\breadonly\b/,'');

o usa Jquery:

$( "div" ).removeClass( "readonly" )

o alternar la clase:

$( "div" ).toggleClass( "readonly", addOrRemove );

Para estar completo, buena suerte = ^)

simplemente use onkeydown = "return false" a la etiqueta de control como se muestra a continuación, no aceptará valores del usuario.

    <asp:TextBox ID="txtDate" runat="server" AutoPostBack="True"
ontextchanged="txtDate_TextChanged" onkeydown="return false" >
    </asp:TextBox>

Una opción es vincular un controlador al inputevento.

La ventaja de este enfoque es que no evitamos los comportamientos del teclado que el usuario espera (por ejemplo, tabulación, página arriba / abajo, etc.).

Otra ventaja es que también maneja el caso cuando se cambia el valor de entrada pegando texto a través del menú contextual.

Este enfoque funciona mejor si solo le importa mantener la entrada vacía. Si desea mantener un valor específico, tendrá que rastrearlo en otro lugar (¿en un atributo de datos?) Ya que no estará disponible cuando inputse reciba el evento.

const inputEl = document.querySelector('input');

inputEl.addEventListener('input', (event) => {
  event.target.value = '';
});

<input type="text" />

Probado en Safari 10, Firefox 49, Chrome 54, IE 11.

Para una solución de solo CSS, intente configurar pointer-events: noneen la entrada.