具有最少字数条件的 HTML 文本区域
Posted
技术标签:
【中文标题】具有最少字数条件的 HTML 文本区域【英文标题】：HTML textarea with minimum words condition 【发布时间】：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>【问题讨论】：
【参考方案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('*');
);
);
【讨论】：
以上是关于具有最少字数条件的 HTML 文本区域的主要内容，如果未能解决你的问题，请参考以下文章
Android 应用 (Cordova) 上的文本区域中的字数超出限制