make input tag toggle between edit and readOnly

问题

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>

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)
})

回答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>

回答2:

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>

回答3:

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>

来源：https://stackoverflow.com/questions/58107649/make-input-tag-toggle-between-edit-and-readonly

标签

javascript

jquery

html

css