What Is The Correct Readonly Attribute Syntax for Input Text Elements

What is the correct readonly attribute syntax for input text elements?

From w3:

readonly = "readonly" or "" (empty string) or empty -
Specifies that element represents a control whose value is not meant to be edited.

So basically it's the same.

What is the difference between readonly=true & readonly=readonly?

Giving an element the attribute readonly will give that element the readonly status. It doesn't matter what value you put after it or if you put any value after it, it will still see it as readonly. Putting readonly="false" won't work.

Suggested is to use the W3C standard, which is readonly="readonly".

html attribute 'readonly' stops text input when i add it to original html, but not if i add it through javascript

You've misspelled "readonly" in $('#event_title').attr(readyonly", "readonly") - you got "readyonly" as 1st param :-)

Is it possible to make input fields read-only through CSS?

With CSS only? This is sort of possible on text inputs by using user-select:none:

.print {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;          
}

JSFiddle example.

It's well worth noting that this will not work in browsers which do not support CSS3 or support the user-select property. The readonly property should be ideally given to the input markup you wish to be made readonly, but this does work as a hacky CSS alternative.

With JavaScript:

document.getElementById("myReadonlyInput").setAttribute("readonly", "true");

Edit: The CSS method no longer works in Chrome (29). The -webkit-user-select property now appears to be ignored on input elements.

Conditionally make input field readonly in Angular 2 or 4: Advice + Best/which way to do it

You need to use the following (Angular 4):

<input [readonly]="isReadOnly">

If you use att.readonly then the input will always be read-only because the readonly attribute will be present even if its value is false. By using [readonly] Angular will only place the attribute if isReadOnly is true.

In HTML, the following is sufficient to cause an input to be read-only:

<input readonly>

Set readonly property to false for an HTML text input on clicking an anchor tag

change the readonly property of an element..use prop()

 $("#name").prop('readonly', false);

link to read more about prop() and attr()

How to add a “readonly” attribute to an input?

jQuery <1.9

$('#inputId').attr('readonly', true);

jQuery 1.9+

$('#inputId').prop('readonly', true);

Read more about difference between prop and attr

---

Related Topics