Question

required属性在具有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');
    }
  })
}

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所说的，这是发现自己的原因，因为您是唯一了解并知道要验证的内容的人

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

2 个答案: