使contenteditable =“ true” div具有有效和无效状态

Question

必需的属性不适用于带有contentEditable =“ true”的div。是否有任何方法可以使该字段成为必需字段，以便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');
    }
  })
}

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();
  }
})