Question

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

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

＆＃13;

<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>

＆＃13;

Answer 1

我认为纯HTML代码无法实现您期望的目标。相反，你需要编写一些JavaScript代码。假设你的textarea有一个id属性，设置为＆＃34; inputString＆＃34;。然后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

我稍微调整了一下代码，现在正在运行。以下是基于调整后代码的示例 -

＆＃13;

<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>

＆＃13;

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

具有最少单词条件的HTML textarea

3 个答案: