限制Html Textarea

时间:2011-03-16 08:32:52

标签: php javascript jquery html

我有一个textarea

<textarea name="Users[address]" id="Users_address"></textarea> 

现在我不希望用户每行输入超过25个字符且不超过3行,这是否可以验证和实现以及如何实现?验证可以在javascript或php中完成

7 个答案:

答案 0 :(得分:7)

的jQuery

当用户输入时,这将删除与规则不匹配的文本。

var maxLines = 2,
    maxLineWidth = 5;

$('#Users_address').bind('change keyup paste drop', function() {
   var value = $(this).val(),
       lines = value.split('\n'),
       linesLength = lines.length;

    if (linesLength > maxLines) {
       lines = lines.slice(0, maxLines);
       linesLength = maxLines;
    }

    for (var i = 0; i < linesLength; i++) {
        if (lines[i].length > maxLineWidth) {
          lines[i] = lines[i].substring(0, maxLineWidth);  
        } 
    }

    $(this).val(lines.join('\n'));
});

jsFiddle

PHP

$str是您用户输入的字符串。

define('MAX_LINES', 10);
define('MAX_LINE_LENGTH', 25);

$lines = explode("\n", $str);

if (count($lines) > MAX_LINES) {
    echo 'Too many lines.';
}

foreach($lines as $line) {
    if (strlen($line) > MAX_LINE_LENGTH) {
        echo 'Too many chars wide';
        break;
    }
}

这将拒绝与规则不符的文本。要将任何文本转换为遵循规则的文本(可能删除字符),只需将上面的jQuery转换为PHP。

答案 1 :(得分:2)

将以下代码插入页眉:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>

使用以下代码创建表单和文本区域(如有必要,请更改表单和文本区域的名称以满足您的需要):

<form name="myform">
<textarea name="limitedtextarea" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,100);" 
onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,100);">
</textarea><br>
<font size="1">(Maximum characters: 100)<br>
You have <input readonly type="text" name="countdown" size="3" value="100"> characters left.</font>
</form>

要创建单行文本字段而不是文本区域,请使用以下代码:

<form name="myform">
<input name="limitedtextfield" type="text" onKeyDown="limitText(this.form.limitedtextfield,this.form.countdown,15);" 
onKeyUp="limitText(this.form.limitedtextfield,this.form.countdown,15);" maxlength="15"><br>
<font size="1">(Maximum characters: 15)<br>
You have <input readonly type="text" name="countdown" size="3" value="15"> characters left.</font>

参考表格:

http://www.mediacollege.com/internet/javascript/form/limit-characters.html

答案 2 :(得分:1)

必须用javascript和php来完成

......

尝试这个可以限制文本区域中字符限制的mootools类,

http://www.xpertdeveloper.com/2010/11/text-limiter-class-with-mootools/

答案 3 :(得分:0)

查看来自Matt的this有用教程。

答案 4 :(得分:0)

你不能用html原生地做。也许用javascript。 你可以做的是对数据进行后期处理。 您可以检查每条线的长度和线数,并在用户超出限制时返回错误。

对带有“\ n”的条目使用explode()作为分隔符将条目拆分为数组中的行。 使用数组上的count来检查行数。 然后,您可以在每个索引上使用strlen来检查行的长度。

答案 5 :(得分:0)

试试这段代码!

<html>
<title>Limit Charecters</title>
<head>
<script language="javascript" src="Jquery.js"></script>
<script language="javascript">
function limitChars(textid, limit, infodiv)
{
 var text = $('#'+textid).val(); 
 var textlength = text.length;
 if(textlength > limit)
 {
  $('#' + infodiv).html('You cannot write more then '+limit+' characters!');
  $('#'+textid).val(text.substr(0,limit));
  return false;
 }
 else
 {
  $('#' + infodiv).html('You have '+ (limit - textlength) +' characters left.');
  return true;
 }
}
</script>
</head>
<body>
       <textarea name="Users[address]" id="Users_address" onkeyup="limitChars(this, 20, 'charlimitinfo')">
       </textarea>    
</body>
</html>

希望它有效!

答案 6 :(得分:0)

许多人已经回答了Javascript验证。在php中,你应该总是验证输入。

if (strlen($_POST['users\[address\]') > 25)
{
     // The input was larger than 25, so produce error

   echo 'Your input is longer than 25 characters. Please retry.';
}
else
{
   echo 'Your post was successful.';

     // Perform whatever you want using the data from the form
}