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

Question

我正在寻找一个文本区域代码，允许用户仅在他们在提供的文本区域中输入一定数量的单词（比如 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>

Answer 1

我认为纯 html 代码无法达到您想要的目标。相反，您需要编写一些 javascript 代码。假设你的 textarea 有一个 id 属性，它被设置为 "inputString"。那么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>

Answer 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

Answer 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

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

}

 });
});

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

HTML textarea with minimum words condition

textarea

words

minimum