Is there a css or html only way to prevent a user from typing in an input field?
I want to dynamically add stuff and remove stuff etc to an input field but I don't want the user to be able to edit it and using the disable attribute on the html tag prevents me from doing what I want.
You can use readonly or disabled attribute.
The drawback to using disabled is that the value of the disabled element won't be submitted when the form is.
You'll likely want readonly. Which can easily be styled to look like a disabled element.
document.getElementById('test').value = 'Hello World!';[readonly] {
border: 1px solid #ccc;
background-color: #eee;
}<input type="text" id="test" name="test" readonly>You can use the attribute readonly - read about it here
Yep, you can just set the input element's disabled property to true. That will prevent the user from modifying its contents, but you can do what you like with it by using Javascript to modify its value property.
add readonly to it
<input type="text" value="Hello" readonly />
Uhm.....
<input type="text" name="myInput" value="Whatever" readonly="readonly" />
More here: What is the correct readonly attribute syntax for input text elements?
You can fake the disabled effect using CSS.
pointer-events:none;
You might also want to change colors etc.
CSS is not meant to change the behavior of form elements. It's meant to change their style only. Hiding a text field doesn't mean the text field is no longer there or that the browser won't send its data when you submit the form. All it does is hide it from the user's eyes.
To actually disable your fields, you must use the disabled attribute in HTML or the disabled DOM property in JavaScript.
OR JQUERY
$('#fieldname').attr('disabled', 'disabled'); //Disable
$('#fieldname').removeAttr('disabled'); //Enable
pointer events: none. ha! neat trick but I can tab and then also use space bar to activate checkbox/radio
inputfield :)