Javascript和PHP的textarea字符限制

Posted 2023-05-07

技术标签:

【中文标题】Javascript和PHP的textarea字符限制【英文标题】：textarea character limit by Javascript & PHP 【发布时间】：2011-06-02 06:54:33 【问题描述】：

我使用 2 种方法来检查用户是否在 textarea 中输入了太多字符：

1)（被动）php：

$textarea = $_POST['textarea'];
if (strlen($textarea)>300)$verify="bad";

2)（主动输入）javascript：

function ismaxlength(obj)

   var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
   if (obj.getAttribute && obj.value.length>mlength)
   obj.value=obj.value.substring(0,mlength)

而textarea本身如下（html）：

<textarea name="textarea" id="textarea" cols="40" rows="5" style="border: 1px solid #480091; width:460px;" wrap="soft" maxlength="300" onpaste="return ismaxlength(this)" onkeyup="return ismaxlength(this)"></textarea>

这两种方法都有效，除了 PHP strlen() 函数对返回（换行符）的计数似乎与我的 Javascript 函数不同。

有谁知道如何解决这个问题，以便他们都计算相同的 # 个字符，而不管换行符和空格等。

非常感谢！

【问题讨论】：

修复您的代码，使其可读。添加四个空格您可以使用代码示例按钮 (()) 来格式化您的代码。 @seth.vargo, @LittleBobbyTables - 代码现在可读 【参考方案1】：

您必须先转换换行符。在 JavaScript 中，换行符是一个换行符。发送时，有两个。您可以将它们标准化：

$textarea = $_POST['textarea'];
$textarea = str_replace("\r\n", "\n", $textarea);
$textarea = str_replace("\r", "\n", $textarea);

然后你就可以计算textarea的长度了。

【讨论】：

【参考方案2】：

Javascript 通常在浏览器本身而不是 /r/n 对中仅使用换行符（例如 /n）来表示换行符。但是，提交后是represented by /r/n pair (a.k.a. "CR LF") per the HTML 4.01 specification。

根据您选择计算换行符的方式，您可以在客户端或服务器端“标准化”字符串（例如，将换行符计为两个字符；如果您希望处理 /r/n 对）或服务器端（例如，如果您不想处理 /r/n 对，则将其计为一个字符）。

我个人的选择是处理它，以便保留 /r/n，因为换行符是 typically represented with these characters in most systems。但是，我可以看到将换行符表示为最终用户的“一个字符”的逻辑，因为它是单次击键。

【讨论】：

【参考方案3】：

@RLJ：这是另一种防止用户输入超过 JavaScript 最大长度的文本的方法，如果 JavaScript 关闭，PHP 将在字符过多时打印错误消息。这是我使用我使用的 JavaScript 函数制作的示例脚本（将文件另存为 4575150.php 在您的 localhost 上并进行测试）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>questions/4575150</title>

<script type="text/javascript">
function charsLeft(msgObj, cntObj, chrLen) 
    var frmObj   = document.getElementById(msgObj);
    var cntField = document.getElementById(cntObj);
    var maxlimit = chrLen;
    var msg      = 0;

    while (cntField.firstChild) 
        cntField.removeChild(cntField.firstChild);
    

    if (frmObj.value.length > 0)  msg = frmObj.value.length + 0; 

    // IE counts both CR and NL, so just count for NL
    var IELength = 0;
    if (frmObj.value.length > 0 && frmObj.value.match('\r')) 
        splitL = frmObj.value.split('\n').length;
        msgL   = frmObj.value.length;

        if (splitL >= 3) 
            IELength = splitL - 1; // splitL >= 3
         else 
            IELength = 1;
        
        msg = msg - IELength;
    

    if (msg > maxlimit) 
        cntField.appendChild(document.createTextNode("0 characters left"));
        var overflow = msg - maxlimit;
        var backspace = frmObj.value.length - overflow;
        if (frmObj.value.length > 0 && backspace < 0) 
            backspace = backspace * -1;
            if (frmObj.value.length < backspace) 
                overflow = frmObj.value.length;
             else 
                overflow = backspace;
            
         else if (frmObj.value.length == 0 && backspace < 0) 
            overflow = 0;
        
        frmObj.value = frmObj.value.substring(0, frmObj.value.length - overflow);
     else 
        cntField.appendChild(document.createTextNode(maxlimit - msg + " characters left"));
    

</script>

<style type="text/css">
html, body, textarea 
    font-family: arial, helvetica, sans-serif;

body 
    font-size: 75%;

label 
    display: block;
    font-weight: bold;

form div 
    margin: 0 0 10px 0;

</style>
</head>

<body>

<?php
define("chars", 15);

$request_method = strtoupper($_SERVER['REQUEST_METHOD']);

if ($request_method == "POST")

    $text = $_POST['text'];

    if (strlen($text) > chars)
    
        echo "<p><b>Error:</b> Too many characters! There ";
        echo "should be " . chars . ", you've entered ";
        echo abs(chars - strlen($text)) . " too many</p>";
    

?>

<form action="4575150.php" method="post">
    <div>
        <label for="text">Text:</label>
        <textarea name="text" id="text" style="width: 97%" class="resizable" cols="40" rows="3" onkeydown="charsLeft(this.id, this.id + '_left', <?php echo chars; ?>)" onkeyup="charsLeft(this.id, this.id + '_left', <?php echo chars; ?>)" onkeypress="charsLeft(this.id, this.id + '_left', <?php echo chars; ?>)" onchange="charsLeft(this.id, this.id + '_left', <?php echo chars; ?>)" onfocus="charsLeft(this.id, this.id + '_left', <?php echo chars; ?>)" onblur="charsLeft(this.id, this.id + '_left', <?php echo chars; ?>)"><?php echo $text; ?></textarea>
        <div id="text_left"><span><?php echo chars - strlen($text); ?> characters left</span></div>
    </div>
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>

</body>
</html>

【讨论】：

【参考方案4】：

你在 php 中有魔法引用吗？尝试调用 get_magic_quotes_gpc()。

如果你这样做了，那么通过 GET 或 POST 发送到服务器的每个文本数据都会用斜杠转义。这使得像“，'，\，$，换行符这样的字符由两个字符的组合表示：\和原始字符或在回车的情况下\r\n。

要在服务器上使用它，您可以像这样过滤数据：

function unslash($string)
    if(get_magic_quotes_gpc())
        return stripslashes($string);
    
    return $string; // no need to unslash


$textarea = unslash($_POST['textarea']);
// the rest of your code

我希望这会有所帮助。伊万

【讨论】：

以上是关于Javascript和PHP的textarea字符限制的主要内容，如果未能解决你的问题，请参考以下文章

IE - 如何在 textarea 中保留空白，使用 javascript 字符串输入

Javascript匹配电子邮件电话号码和字符串中的特殊字符（textarea）

将 textareas 字符串值转换为由换行符分隔的 JavaScript 数组

有没有办法在不使用 PHP 或 JavaScript 的情况下让 textarea 拉伸以适应其内容？

html 中 SMS TextArea 的 Javascript 字符计数器

使用javascript替换textarea中所有行中的子字符串