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

Question

我有一个问题，如何在不使用其他按钮的情况下将输入标签从编辑切换到只读。我这里有我的代码笔。如果您注意到我在 div 上添加了一个事件。这有点愚蠢，因为当他们想要编辑时，他们单击输入，然后下一次单击将禁用它。我在某处看到了一些东西。他们实施了同样的事情。任何我可以阅读的链接？谢谢你。HTML<div id='wasa'>  <input id="date" type="date" value="2018-07-22" ></div>JSconst 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>

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() {

    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>