SmurfEkko SmurfEkko - 2 months ago 8
CSS Question

Stop user from inputing text in input field

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.

Answer

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>

Comments