我有一个问题,如何将输入标签从编辑切换为只读,而不使用其他按钮。我在这里有我的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)
})
答案 0 :(得分:2)
您可以使用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>
答案 1 :(得分:1)
如果您对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>
答案 2 :(得分:1)
您可以使用 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>