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

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 时，使用 date.removeAttribute('readonly') 删除只读属性，如 Nidhin 所示。

挑选新日期时，会触发更改事件;将更改侦听器附加到日期字段。在该侦听器中（当字段更改时），然后添加 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>