make input tag toggle between edit and readOnly

Question

I have a question, how do you toggle input tag from edit to readOnly but without using other buttons. I have here my codepen. If you notice I added an event on a div. This one kinda dumb because when they want to edit they click the input and then the next click will disable it. There's something that I saw somewhere. They implemented this same thing. Any links that I could read? thank you.

HTML

<div id='wasa'>
  <input id="date" type="date" value="2018-07-22" >
</div>

JS

const test = document.querySelector('#wasa');
const date = document.querySelector('#date');
let foo = false; 
test.addEventListener('click', function() {
  foo = !foo
  date.readOnly = foo;
  console.log(foo)
})

What condition do you want it to be readonly under? It seems like you already know how to make it readonly. — Declan McKelvey-Hembree, Sep 25 '19 at 23:16
@DeclanMcKelvey-Hembree wanted to make it readonly if user are not editing it. they can full control if they want to edit it. but my problem is onload it will be readOnly, if I click to edit and click the drop down to edit the date it will turn to readonly again. thats my problem. hope it makes sense — aRtoo, Sep 26 '19 at 14:18
_"but without using other buttons"_ — as Declan asks, rather than using a button, _**how**_ (when, under what conditions) do you want it to change? Your current code does it, though Nidhin's answer is a better way to do it. But when should that code be run? You say you don't want it to run on a (button) click, so when _do_ you want the readonly state to toggle? Without that information, it is unclear what you are asking. — Stephen P, Sep 26 '19 at 17:38
@StephenP so onload I can see the dates value, when I click the input field first time thats the moment I can edit it or removed the readOnly, so the condition is when the input field is on readOnly and user clicks, thats the moment the `readOnly` will be removed, since readOnly is removed they can edit the date, user can click the drop down and look for a date, after they picked a date then it will return to readOnly. after playing around I dont think this is doable. I need another button to toggle readonly. if they click the dropdown then it will return to readonly — aRtoo, Sep 26 '19 at 17:53
So take off the toggle -- start as readonly `` then, when the div is clicked, remove the readonly attribute using `date.removeAttribute('readonly')`as Nidhin shows. When a new date is picked (or typed or changed in any way) a `change` event if fired; attach a change listener `date.addEventListener('change', function(){...})` — in _that_ listener (when the field is _changed_) then add the readonly attribute back `date.setAttribute('readonly','');` — Stephen P, Sep 26 '19 at 18:40

Nidhin Joseph · Answer 1 · 2019-09-25T23:24:48.930

3

You can use the setAttribute and removeAttribute attribute functions to toggle disabled state.

const test = document.querySelector('#wasa');
const date = document.querySelector('#date');
test.addEventListener('click', function() {
  if (date.hasAttribute('readonly')) {
    date.removeAttribute('readonly')
  } else {
    date.setAttribute('readonly', 'readonly');
  }
})

#wasa {
  padding: 1em;
}

<div id='wasa'>
  <input id="date" type="date" value="2018-07-22">
</div>

edited Sep 25 '19 at 23:24

answered Sep 25 '19 at 23:16

Nidhin Joseph

9,981
4
26
48

`disabled` and `readonly` are [not the same thing](https://stackoverflow.com/a/7730719/17300). – Stephen P Sep 25 '19 at 23:21
1

@StephenP have changed. – Nidhin Joseph Sep 25 '19 at 23:24
this is the same as mine. how would change the date? if you click the drop down button it will set to readonly – aRtoo Sep 26 '19 at 14:15

score 2 · Answer 2 · answered Sep 26 '19 at 18:54

You can use the change event to restore the readonly status of the field.

From my comment...

Take off the toggle — start as readonly by including the readonly attribute on the field

<input type="date" value="2018-07-22" readonly>

Then, when the div is clicked, remove the readonly attribute using date.removeAttribute('readonly') as Nidhin shows.

When a new date is picked a change event is fired; attach a change listener to the date field. In that listener (when the field is changed) then add the readonly attribute back.

Note that a change isn't always fired the moment a value changes, it may not be fired until you leave the field (blur), so you may want to further adapt the code below, but it is fired when you change the value via the datepicker.

const dateDiv = document.getElementById('wasa');
const date = document.querySelector('input[type=date]', dateDiv);

dateDiv.addEventListener('click', function() {
    date.removeAttribute('readonly');
});

date.addEventListener('change', function() {
    date.setAttribute('readonly','');
});

#date  {
  background: transparent;
  border: none;
}

#date[readonly] {
  background-color: lightblue;
}

<div id='wasa'>
  <input id="date" type="date" value="2018-07-22" readonly>
</div>

thank you for this. this works yea I had to implement on blur. I have to accept the answer above because it's complete. thank you though for giving me an idea. :) — aRtoo, Sep 27 '19 at 15:29

Icewine · Accepted Answer · 2019-09-27T00:30:53.233

1

If you are interested in a jQuery answer this would be how I would do it. It is a little more clean than a pure javascript answer and achieves the same thing.

// remove readonly when clicking on the input
$("body").on("click", "#wasa input", function(){  
  $(this).prop("readonly", "");
  
  // EDIT: this was the prevoius answer
  //$(this).prop("readonly", !$(this).prop("readonly"));// unlock by clicking on the input
});

/* NEW */
// lock input when click/tab away
$("body").on("focusout", "#wasa input", function(){  
  $(this).prop("readonly", "readonly");  
});

#wasa input:read-only {
  background: crimson;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='wasa'><input id="date" type="date" value="2018-07-22" readonly></div>

edited Sep 27 '19 at 00:30

answered Sep 26 '19 at 02:13

Icewine

1,851
1
12
22

but how would change the date though? if you try clicking on the drop down it will be set to readonly. same problem as mine. – aRtoo Sep 26 '19 at 14:15
1

@aRtoo Sorry I thought that was what you wanted. I have edit the answer to have it where when you click on the input, it removes the readonly, and when you click away or lose focus, it will add the readonly attribute. Good Luck! – Icewine Sep 27 '19 at 00:32
dont be sorry sir. this works. thank you so much. appreciate the answer. I will accept. – aRtoo Sep 27 '19 at 15:30

make input tag toggle between edit and readOnly

3 Answers3

Linked