javascript - 使输入标签在编辑和只读之间切换

Question

我有一个问题，如何在不使用其他按钮的情况下将输入标签从编辑切换为只读。我有我的 codepen .如果您注意到我在 div 上添加了一个事件。这有点愚蠢，因为当他们想要编辑时，他们单击输入，然后下一次单击将禁用它。我在某处看到了一些东西。他们实现了同样的事情。我可以阅读的任何链接？谢谢。

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

Answer 1

您可以使用 setAttribute和 removeAttribute属性函数来切换禁用状态。

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>