Javascript 我怎么能不允许用户继续在textarea中输入任何输入？_Javascript_Html

Javascript 我怎么能不允许用户继续在textarea中输入任何输入？

javascript html

Javascript 我怎么能不允许用户继续在textarea中输入任何输入？,javascript,html,Javascript,Html,我在我的一个网站上创建了一个问答，我想指定一个100字的限制。我创建了一个简短的JS函数，弹出一条消息说输入太长，但我也希望它停止允许用户继续编写。我可以添加哪行代码来阻止用户输入超过100个单词？在以下几行中，我将发布JS函数和问答的HTML <!DOCTYPE html> <html> <head> <meta charset='UTF-8' /> <title>Oversimplified</title&

我在我的一个网站上创建了一个问答，我想指定一个100字的限制。我创建了一个简短的JS函数，弹出一条消息说输入太长，但我也希望它停止允许用户继续编写。我可以添加哪行代码来阻止用户输入超过100个单词？在以下几行中，我将发布JS函数和问答的HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8' />
    <title>Oversimplified</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet">
    <style>
        
    </style>
    
    <link rel='stylesheet' href='../styles.css' />
</head>

<body id='Q-A-BG'>
    <header class="Header Subsection"> <!-- This is the menu-->
        <nav class="Header-Container">
            <button class="hamburgerMenu">
              <svg viewBox="0 0 20 20" fill="currentColor" class="menu w-6 h-6">
                <path
                  fill-rule="evenodd"
                  d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </button>
            <ul id="MobileMenu" class="Menu SubsectionMenu">
              <li><a href="../Oversimplified.html">Home</a></li>
              <li><a href="Q&A.html">Q&A</a></li>
              <li><a href="Blog.html">Blog</a></li>
              <!-- <li><button class="themeToggle">Theme</button></li> -->
            </ul>
          </nav>
    </header>
    <article class="Questions"><!--This has to do with the Information section-->
        <h1> Submit your question</h1>
        <form method='GET' action='mailto:wot.questionsanswers@gmail.com' enctype="text/plain">
            <div class="InputSection">
                <label for='first-name'> First name</label>
                <input id='first-name' name='body' type='text' placeholder="First Name" required/> 
            </div>
            <div class="InputSection">
                <label for='last-name'> Last name</label>
                <input id='last-name' name='body' type='text' placeholder="Last Name" required/>
            </div>
            <div class="InputSection">
                <label for='Education'>Level of education</label>
                <select id='Education' name='Education'>
                    <option></option>
                    <option>High School</option>
                    <option>Physics undergraduate</option>
                    <option>Physics graduate</option>
                    <option>Adult with little knowledge of physics</option>
                    <option>Adult with some knowledge of physics</option>
                    <option>Adult with college level knowledge of physics</option>
                </select>
            </div>
            <div class="InputSection">
                <label for='subject'> Subject</label>
                <input id='subject' name='subject' placeholder='Subject' required/>
            </div>
            <div class="InputSection">
                <label for='question'> Your question</label>
                <textarea id='question' name='body' placeholder="Be precise and describe your question in less than 100 words" required></textarea>
            </div>
            <p class="longQuestion">
                Please enter a question in less than 100 words
            </p>
            <div class="InputSection">
                <label class='Checkbox' for='accepts'>
                <input id='accepts' name='accepts' type='checkbox' value='Agrees to the terms' required/>
                <span> I accept the <a href="#"> Terms and Conditions</a></span>
                </label>
            </div>
            <div class="InputSection">
                <input id='SubmitButton' type="submit" value="Submit">
            </div>
        </form>
    </article>
<script src="../wordLimit.js"></script>
<script src="../hamburgerMenu.js"></script>
<script src="../darkMode.js"></script>
</body>

</html> 

/*100 word limit*/
const question = document.querySelector("#question");
const errorMessage = document.querySelector(".longQuestion");

function lessThan100() {
    const questionWords = question.value.split(" ");
    if (questionWords.length > 100) {
        errorMessage.style.display = "block";
        question.style.border = "1px solid red";
    } else {
        errorMessage.style.display = "none";
        question.style.border = "1px solid black";
    }
}
      
question.addEventListener("input", lessThan100);


过分简化





/*100字限制*/
const question=document.querySelector（“问题”）；
const errorMessage=document.querySelector（“.longQuestion”）；
函数lessThan100（）{
const questionWords=question.value.split（“”）；
如果（提问词长度>100）{
errorMessage.style.display=“block”；
question.style.border=“1px实心红色”；
}否则{
errorMessage.style.display=“无”；
question.style.border=“1px纯黑”；
}
}
问题。添加的监听器（“输入”，lessThan100）；

发送错误消息后，只需重置问句即可

question.value=questionWords.slice（01000）.join（“”）
发送错误消息后，只需重置问题词
question.value=questionWords.slice（01000）.join（“”）
您可以将e.preventDefault（）
与按键按下事件一起使用：

document.getElementById（'limit'）.addEventListener（'keydown'，函数（e）{
如果（此.value.split（/\s+/）.length>100&！['ArrowLeft'，'ArrowRight'，'ArrowUp'，'ArrowDown'，'Backspace']包括（e.key））{
e、 预防默认值（）
document.getElementById（'limitWarning'）。innerHTML='您已达到100字的限制'
}否则{
document.getElementById（'limitWarning'）。innerHTML=''
}
})
您可以将e.preventDefault（）
与键按下事件一起使用：

document.getElementById（'limit'）.addEventListener（'keydown'，函数（e）{
如果（此.value.split（/\s+/）.length>100&！['ArrowLeft'，'ArrowRight'，'ArrowUp'，'ArrowDown'，'Backspace']包括（e.key））{
e、 预防默认值（）
document.getElementById（'limitWarning'）。innerHTML='您已达到100字的限制'
}否则{
document.getElementById（'limitWarning'）。innerHTML=''
}
})
为了更好地UX（用户体验），您需要在文本区域达到字数限制后立即禁用它。这样用户就知道他们不能再打字了
我们需要直观地向用户显示100字的限制已经达到。这就是为什么在这里使用e.preventDefault（）
或return false
不是一个好方法
我们可以通过将输入元素的属性设置为true
或false

此外，使用此方法，您不需要更改当前的代码并保持原样
编辑：
另外，如果需要更严格的检查，请在问题元素中添加focusin
事件
目前，它使用单个空格分割单词，如果您不在乎用户是否在单词之间放置了多个空格，您可以使用/\s+/g
而不是单个空格
现场工作演示：

/*100字限制*/
const question=document.querySelector（“问题”）；
const errorMessage=document.querySelector（“.longQuestion”）；
函数lessThan100（）{
const questionWords=question.value.split（“”）；
//对于单词之间的多个空格，
//取消注释下面的代码并注释第一个代码
//const questionWords=question.value.split（/\s+/g）；
console.log（提问词）；
如果（问题长度>5）{
errorMessage.style.display=“block”；
question.style.border=“1px实心红色”；
问题1.disabled=true
}否则{
errorMessage.style.display=“无”；
question.style.border=“1px纯黑”；
问题.禁用=错误
}
}
问题。添加的监听器（“输入”，lessThan100）；
//为了更严格的检查
问题.增补的列表（“聚焦”，第100节）

不能写超过5个字
为了更好地UX（用户体验），您需要在文本区域达到字数限制后立即禁用它。这样用户就知道他们不能再打字了
我们需要直观地向用户显示100字的限制已经达到。这就是为什么在这里使用e.preventDefault（）
或return false
不是一个好方法
我们可以通过将输入元素的属性设置为true
或false

此外，使用此方法，您不需要更改当前的代码并保持原样
编辑：
另外，如果需要更严格的检查，请在问题元素中添加focusin
事件
目前，它使用单个空格分割单词，如果您不在乎用户是否在单词之间放置了多个空格，您可以使用/\s+/g
而不是单个空格
现场工作演示：

/*100字限制*/
const question=document.querySelector（“问题”）；
const errorMessage=document.querySelector（“.longQuestion”）；
函数lessThan100（）{
const questionWords=question.value.split（“”）；
//对于单词之间的多个空格，
//取消注释下面的代码并注释第一个代码
//const questionWords=question.value.split（/\s+/g）；
控制台