使内容可编辑= div "true"具有有效和无效状态

Question

required属性在contentEditable="true"的div上不起作用。有什么方法可以使字段成为required，从而使div具有有效和无效的状态吗？

Answer 1

您可以使用以下脚本来使用required属性：

const selectors = document.querySelectorAll('div[contenteditable="true"][required]');
for (let selector of selectors) {
selector.addEventListener('input', () => {
if (selector.innerHTML === '') {
selector.style.border = '2px solid red';
selector.classList.add('content-invalid');
}
else {
selector.style.border = 0;
selector.classList.remove('content-invalid');
}
})
}

假设你有一个表格，如果缺少值，就不应该提交：

const selectors = document.querySelectorAll('div[contenteditable="true"][required]');
for (let selector of selectors) {
selector.addEventListener('input', () => {
if (selector.innerHTML === '') {
selector.style.border = '2px solid red';
selector.classList.add('content-invalid');
}
else {
selector.style.border = 0;
selector.classList.remove('content-invalid');
}
})
}
document.querySelector('form').addEventListener('submit', (e) => {	
if (document.querySelector('.content-invalid')) {
	e.preventDefault();
}
})

<form action=""> 
<div contenteditable="true" required>Hello</div>
<div contenteditable="true" required>World</div>
<input type="submit">
</form>

Answer 2

如果您真的坚持使用div标签来获取文本，请尝试查找$('div').text()以获取您想要的文本。如果希望数据类型为整数类型，请执行parseInt()之类的进一步解析。

为了进行进一步的验证，我支持ProEvilz的评论，即发现自己，因为你是唯一一个理解并知道要验证的人