Input field readonly to users but still editable via DOM

Question

I have an input field like so:

<input type="text" id="23" value="Something" readonly />

I have the input element readonly because I don't want users to be able to edit the field value.

However, what I would like is to be still able to manipulate the value of the element via the DOM e.g:

getElementById('23').value="Something else";

Is this possible?

`getElementById('23')`? you mean `document.getElementById('23')` — Zakaria Acharki, Feb 27 '16 at 16:52

score 1 · Accepted Answer · edited May 23 '17 at 12:31

1

sure it is: but you will need to do so https://jsfiddle.net/pz1yd11u/

document.getElementById('23').value="Something else";

You were missing the document

(IDs and class names should never start with a number: read this)

Update after comment, with click event to change the input value

https://jsfiddle.net/pz1yd11u/1/

document.getElementById("kevs-button").addEventListener("click", displayNewValue);
  
function displayNewValue() {
 document.getElementById('23').value="Something else";
}

#kevs-button {
  background-color: orange;
  padding: 5px;
  width: 100px;
}
#kevs-button:hover {
  cursor: pointer;
  background-color: green;
}

<input type="text" id="23" value="Something" readonly />

<div id="kevs-button">Button</div>

edited May 23 '17 at 12:31

Community

1
1

answered Feb 27 '16 at 16:51

caramba

19,727
15
78
118

I don't think I explained myself very well :) What I need to do is change the value on an event (click, hover whatever). I understand I can use document.getElementByID() when the document loads but I need to be able to do it with an event. PS - thanks for the link about using numbers as IDs. – Kev Feb 27 '16 at 17:19
1

Hi, sorry, I only just got the reply notification email - it did, yes, I've accepted your answer :) – Kev Feb 29 '16 at 08:47

Input field readonly to users but still editable via DOM

1 Answers1