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>

Answer 2

如果您对jQuery感兴趣，这就是我的方法。它比纯JavaScript答案还干净一点，并且可以实现相同的目的。

// 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>

Answer 3

您可以使用 change 事件恢复该字段的readonly状态。

根据我的评论...

取消切换-通过在字段中添加readonly属性，以只读方式开始

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

然后，当单击div时，如Nidhin所示，使用date.removeAttribute('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>

使输入标签在edit和readOnly之间切换

3 个答案: