使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'); } }) } 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評論的是發現自己，因為你是唯一一個理解並知道要驗證什么的人