具有最少字数条件的 HTML 文本区域答案

【问题标题】：HTML textarea with minimum words condition具有最少字数条件的 HTML 文本区域
【发布时间】：2015-06-09 05:19:00
【问题描述】：

我正在寻找一个 textarea 代码，它允许用户仅在他们在提供的 textarea 中写入一定数量的单词（比如 300）时提交表单。如果有人写的字数较少并尝试提交表单，则应显示警告消息。

我根据以下建议尝试了此代码，但即使是三四个字，表单仍会在没有任何警告的情况下提交。请帮忙。

<html>
<form action="articlesuccess.php" method="POST">
<script type="text/javascript">
function checkWordCount(){
    s = document.getElementById("article").value;
    s = s.replace(/(^\s*)|(\s*$)/gi,"");
    s = s.replace(/[ ]{2,}/gi," ");
    s = s.replace(/\n /,"\n");
    if (s.split(' ').length <= 300) {
        alarm("not enough words...");
    }
}
</script>
     
<p>
 
        <label for="article">Write the article in the box below:</label> <br/>
  <textarea name="article" id="article" style="width:700px; height:500px;"></textarea>
 
    </p>
<input name="submit" id="submit" type="submit" onclick="checkWordCount()" value="Submit" /><input type="Reset" value="Reset">
</form>
</html>

【问题讨论】：

标签： textarea words minimum

【解决方案1】：

我认为纯 html 代码无法实现您想要的目标。相反，您需要编写一些 javascript 代码。假设您的 textarea 有一个设置为“inputString”的 id 属性。那么javascript代码的核心将是：

function checkWordCount(){
    s = document.getElementById("inputString").value;
    s = s.replace(/(^\s*)|(\s*$)/gi,"");
    s = s.replace(/[ ]{2,}/gi," ");
    s = s.replace(/\n /,"\n");
    if (s.split(' ').length <= 300) {
        alarm("not enough words...");
    }
}

别忘了用这个函数连接提交按钮的 OnClick 事件。让我知道是否需要指定更多。

代码借自http://www.mediacollege.com/internet/javascript/text/count-words.html

我已经稍微调整了代码，现在它可以工作了。这是一个基于调整后的代码的例子-

<html>
<head>
<script type="text/javascript">
function checkWordCount(){
    s = document.getElementById("article").value;
    s = s.replace(/(^\s*)|(\s*$)/gi,"");
    s = s.replace(/[ ]{2,}/gi," ");
    s = s.replace(/\n /,"\n");
    if (s.split(' ').length <= 300) {
        alert("not enough words...");
return false;
    }
}
</script>
</head>
<body>
     <form action="nextdestination.php" method="POST">
<p>
 
        <label for="article">Write the article in the box below:</label> <br/>
  <textarea name="article" id="article" style="width:500px; height:400px;"></textarea>
 
    </p>
<input name="submit" id="submit" type="submit" onclick="return checkWordCount()" value="Submit" />
</form>
</body>
</html>

【讨论】：

【解决方案2】：

试试这个

<textarea id="txtId">Lorem Ipsum is simply dummy text of the printing and  typesetting industry. Lorem Ipsum has been the industry's standard dummy.</textarea>
<span id="charsLeft"></span> characters left.
<button id="btnId" onclick="myFunction()">submit</button>
<script>
$('#txtId').limit('300','#charsLeft');
function myFunction(){
if($('#txtId').val().length< 300){
alert('not enough words... minimum limit 300');
}   
    else{
    alert('submit successfully');
}
} 
</script>

JSFIDDLE

【讨论】：

您的代码是字符数。我想验证最少字数。请给出 textarea 中最少字数的代码。

【解决方案3】：

我个人讨厌错误消息！我宁愿更喜欢用户友好的指导信息。试一试，如果您仍然希望收到错误消息，我会进行必要的更改

jQuery(document).ready(function($) {
  $('#submit').attr('disabled', 'disabled');
  $('#text').keyup(function() {
    var currentWordCount = $("#text").val().match(/\S+/g).length;

    if (currentWordCount > 10) {
      $("#submit").removeAttr('disabled');
    } else {
      $('#submit').attr('disabled', 'disabled');
      $('#wordcounter').html(10 - currentWordCount + ' more words to go!');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="myform" action="" method="post">
  <textarea name="text" id="text"></textarea><span id="wordcounter"></span>
  <p>
    <input name="submit" id="submit" type="submit" value="Submit" />
  </p>
</form>

jsfiddle

【讨论】：

是的，这是可行的，但几乎没有问题。在我将提交的属性从 type="button" 更改为 type="submit" 之前，表单没有提交。另一个重要的问题是，一旦用户输入了超过 300 个单词，提交按钮就会激活，即使用户删除了一些文本，并且提交的表单即使少于 300 个单词，它也会保持激活状态。如果用户删除了部分内容并使其少于 300 字后再次停用该按钮会更好。
我想禁止用户提交少于所需字数的文本。如果您有任何建议，请提供帮助。

【解决方案4】：

最大最小字数

受@Vadims 代码启发的快速示例：

HTML 代码：

<label>Content <span id="alert-textarea">*</span></label>
<form>
    <textarea id="textarea"> </textarea>
    <button type="submit"> Submit</button>
</form>

JQuery 代码：

jQuery(document).ready(function($) {

var minimumwords = 3;
var maximumwords = 7;

$('button[type=submit]').attr('disabled', 'disabled');
    
  $('#textarea').keyup(function() {
    var currentWordCount = $("#textarea").val().match(/\S+/g).length;

if (currentWordCount > minimumwords) {
  $("button[type=submit]").removeAttr('disabled');
} else {
  $('button[type=submit]').attr('disabled', 'disabled');
    
    if(currentWordCount < minimumwords){
        $('#alert-textarea').html( 'Add ' + (minimumwords - currentWordCount) + ' Minimum Words To Be Able To Submit Listing');
    } else {
        $('#alert-textarea').html('*');
    }

}


if (currentWordCount < maximumwords) {
  $("button[type=submit]").removeAttr('disabled');
} else {
  $('button[type=submit]').attr('disabled', 'disabled');
    
    if(currentWordCount > maximumwords){
        $('#alert-textarea').html( 'Remove' + (maximumwords - currentWordCount) + ' Words To Be Able To Submit Listing');
    } else {
        $('#alert-textarea').html('*');
    }

}

 });
});

【讨论】：