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

Question

我有一个问题，如何在不使用其他按钮的情况下将输入标签从编辑切换到只读。我这里有我的代码笔。如果您注意到我在 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() {&nbsp; if (date.hasAttribute('readonly')) {&nbsp; &nbsp; date.removeAttribute('readonly')&nbsp; } else {&nbsp; &nbsp; date.setAttribute('readonly', 'readonly');&nbsp; }})#wasa {&nbsp; padding: 1em;}<div id='wasa'>&nbsp; <input id="date" type="date" value="2018-07-22"></div>

Answer 2

您可以使用更改事件来恢复readonly字段的状态。从我的评论...取消切换 - 通过readonly在字段上包含属性以只读方式启动<input type="date" value="2018-07-22" readonly>然后，当单击 div 时，使用date.removeAttribute('readonly')Nidhin 显示的方法删除 readonly 属性。何时挑选新日期时，会触发更改事件; 将更改侦听器附加到日期字段。在该侦听器中（当字段更改时）然后添加 readonly 属性。需要注意的是一个change没有始终点火的瞬间值的变化，它可能不会，直到你解雇离开现场（模糊），所以你可能需要进一步适应下面的代码，但它是当你通过改变数值解雇日期选择器。const dateDiv = document.getElementById('wasa');const date = document.querySelector('input[type=date]', dateDiv);dateDiv.addEventListener('click', function() {&nbsp; &nbsp; date.removeAttribute('readonly');});date.addEventListener('change', function() {&nbsp; &nbsp; date.setAttribute('readonly','');});#date&nbsp; {&nbsp; background: transparent;&nbsp; border: none;}#date[readonly] {&nbsp; background-color: lightblue;}<div id='wasa'>&nbsp; <input id="date" type="date" value="2018-07-22" readonly></div>