How do I make a text input non-editable?

Question

So I have a text input

<input type="text" value="3" class="field left">

Here is my CSS for it

background:url("images/number-bg.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
height:17px;
margin:0 13px 0 0;
text-align:center;
width:17px;

Is there a setting or a trick to this, I was thinking of doing a label instead but how about the styling. How do I convert them and is there a better way or is that the only way?

score 782 · Accepted Answer · edited Jan 12 '17 at 00:57

782

<input type="text" value="3" class="field left" readonly>

No styling necessary.

See <input> on MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

edited Jan 12 '17 at 00:57

Bradley Flood

10,233
3
46
43

answered Sep 09 '10 at 11:36

BoltClock

700,868
160
1,392
1,356

5

or readonly="readonly" if you like it being all XML-y, see Stephan Muller's example below :) – Algy Taylor Feb 19 '14 at 11:18
1

@Algy Taylor: Yeah, that was in the original answer when the original question had a wayward [xhtml] tag that drove everyone nuts about which was valid for which standard :/ – BoltClock Feb 19 '14 at 12:11
is there any way to remove that red circle that comes up when you hover over `textarea` with `readonly` attribute? – StealthTrails Aug 25 '15 at 19:33
Is it possible to I do that for a part of text in the `textarea`? (not whole of text) – Shafizadeh Feb 05 '16 at 15:02
1

@Shafizadeh - No, and that is a good thing. Would be difficult for browsers to implement correctly, and confusing for people to understand. don't try to make a simple control do a complex task. Break your input into pieces, with each piece simple (an editable control, then a non-editable HTML element, then another editable control). – ToolmakerSteve Sep 01 '16 at 08:39
Can you update this input field with javascript? And if yes, how? Can I simply get it by name and edit it's .value? – jaaq Feb 08 '17 at 12:20
1

Also make sure to check this server side if you don't want the value to be persisted. It is easy in the browser's developer tool to remove the attribute, which on its turn makes the input field again editable. – Kurt Van den Branden Apr 17 '20 at 15:14
Yup... always validate your input. Always validate your input. Oh and before I forget: always validate your input. – BoltClock Apr 17 '20 at 16:04
if you want to style it: use the attribute selector. Example: `input[readonly] { background-color: lightgray; }` – nuiun Oct 07 '21 at 10:54

score 75 · Answer 2 · edited Oct 23 '16 at 12:47

75

You can add the attribute readonly to the input:

<input type="text" value="3"
       class="field left" readonly="readonly">

More info: http://www.w3schools.com/tags/att_input_readonly.asp

edited Oct 23 '16 at 12:47

Alex Gyoshev

11,929
4
44
74

answered Sep 09 '10 at 11:37

Stephan Muller

27,018
16
85
126

readonly not work with hidden input – Mahmoud Magdy Jun 15 '23 at 17:21

score 43 · Answer 3 · answered Sep 09 '10 at 11:40

43

You can use readonly attribute, if you want your input only to be read. And you can use disabled attribute, if you want input to be shown, but totally disabled (even processing languages like PHP wont be able to read those).

answered Sep 09 '10 at 11:40

tomsseisums

13,168
19
83
145

2

When you send form to a php file, it won't read disabled inputs. It may be what he meant. – Carlos2W Mar 29 '16 at 17:10
8

what acctualy happens is that disabled inputs are NOT EVEN SENT when you submit a form, has nothing to do with php, js or anything. – vasilevich Dec 22 '16 at 08:20

score 29 · Answer 4 · edited May 23 '17 at 11:55

29

Just to complete the answers available:

An input element can be either readonly or disabled (none of them is editable, but there are a couple of differences: focus,...)

Good explanation can be found here:
What's the difference between disabled=“disabled” and readonly=“readonly” for HTML form input fields?

How to use:

<input type="text" value="Example" disabled /> 
<input type="text" value="Example" readonly />

There are also some solutions to make it through CSS or JavaScript as explained here.

edited May 23 '17 at 11:55

Community

1
1

answered Dec 04 '13 at 10:43

jsidera

1,791
1
17
19

6

If you are going to use `/>` to close your tags, you may as well expand your attributes to `disabled="disabled"` and `readonly="readonly"` too. – BoltClock Feb 20 '14 at 07:38

score 10 · Answer 5 · answered Nov 27 '19 at 08:02

10

if you really want to use CSS, use following property which will make field non-editable.

pointer-events: none;

answered Nov 27 '19 at 08:02

saadk

1,243
14
18

new Q Open Wid · Answer 6 · 2019-08-08T15:48:35.370

Add readonly:

<input type="text" value="3" class="field left" readonly>

If you want the value to be not submitted in a form, instead add the disabled attribute.

<input type="text" value="3" class="field left" disabled>

There is no way to use CSS that always works to do this.

Why? CSS can't "disable" anything. You can still turn off display or visibility and use pointer-events: none but pointer-events doesn't work on versions of IE that came out earlier than IE 11.

J. Fan · Answer 7 · 2017-03-30T08:30:17.320

6

<input type="text" value="3" class="field left" readonly>

You could see in https://www.w3schools.com/tags/att_input_readonly.asp

The method to set "readonly":

$("input").attr("readonly", true)

to cancel "readonly"(work in jQuery):

$("input").attr("readonly", false)

edited Mar 30 '17 at 08:30

answered Mar 30 '17 at 07:58

J. Fan

731
1
7
9

score 2 · Answer 8 · answered Aug 22 '16 at 17:08

2

you just need to add disabled at the end

<input type="text" value="3" class="field left" disabled>

answered Aug 22 '16 at 17:08

Michan

35
5

1

The value is not submitted if you set it to disabled. It might be what *you* need, but it's not what was asked. *As a side note, I came here precisely because my "disabled" input wasn't behaving like I was expecting* – Balmipour Aug 07 '17 at 10:37

score 0 · Answer 9 · answered Apr 17 '21 at 22:02

0

every input must have readonly or editable field so use it

answered Apr 17 '21 at 22:02

Ahmed Raza

401
4
6

score 0 · Answer 10 · answered Dec 13 '22 at 07:51

0

readonly and disabled will work. But if you want to send input value, just use readonly and edit your css .field left:focus{ outline: none }

answered Dec 13 '22 at 07:51

krisssz

65
7

Lerner Zhang · Answer 11 · 2023-02-02T06:39:41.283

In some cases, you just want to make the input element non-editable or unchangeable, which means the text cursor can still be placed there and the cursor can be moved around but only the text remains unchanged. It differs from readOnly or disabled.

Pure JS(jsfiddle)

document.getElementById('input')
  .addEventListener('keydown', (e) => {
  var field = e.target;
  var oldValue = field.value;
  setTimeout(function () {
    if(field.value !== oldValue) {
      field.value = oldValue;
    } 
  }, 1);
  })

<input id="input", type="text" value="default" class="field left">

use JQuery(jsfiddle)

$("input").keydown(function(e) {
var oldValue=$(this).val();
var field=this;
setTimeout(function () {
    if(field.value !== oldValue) {
        $(field).val(oldValue);
    } 
}, 1);
});

<input id="input", type="text" value="default" class="field left">

score 0 · Answer 12 · answered Jul 25 '23 at 08:41

0

In case you are looking for React then you may try:

<input type="text" value="John" readOnly={true}/>

answered Jul 25 '23 at 08:41

geeky01adarsh

312
3
14

How do I make a text input non-editable?

12 Answers12

Linked