Chrome 在使用 maxlength 屬性的 textarea 中計數字符錯誤

問題描述

這是一個例子：



$(function() {
  $('#test').change(function() {
    $('#length').html($('#test').val().length)
  })
})
<script src="https://googleajax.admincdn.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id=test maxlength=10></textarea>
length = <span id=length>0</span>

用行 (一行一個字元) 填充文字區域，直到瀏覽器允許。當你完成，離開 textarea，並且 js 程式碼也會計算字元。

所以在我的情況下，我可以輸入只有 7 個字元 (包括空格)，在 Chrome 停止我之前。雖然 maxlength 屬性的值為 10：

最佳解決思路

您的回車符在 maxlength 時被認為是 2 個字元。

1rn
1rn
1rn
1

但似乎 javascript 只能是 rn 之一 (我不知道哪一個) 只加起來 7 。

次佳解決思路

以下是如何獲取 JavaScript 程式碼以匹配瀏覽器認為在文字區域中的字元數量：

http://jsfiddle.net/FjXgA/53/

$(function () {
    $('#test').keyup(function () {
        var x = $('#test').val();

        var newLines = x.match(/(rn|n|r)/g);
        var addition = 0;
        if (newLines != null) {
            addition = newLines.length;
        }

        $('#length').html(x.length + addition);
    })
})

基本上，您只需計算文字框中的總換行符，併為每個字元計數新增 1 。

第三種解決思路

由於未知的原因，jQuery 始終將<textarea> 的所有換行符轉換為單個字元。也就是說，如果瀏覽器為其新增了 rn，則 jQuery 確保它只是.val()的返回值中的 n 。

Chrome 和 Firefox 都以同樣的方式計算<textarea> 標籤的長度，用於”maxlength” 。

但是，HTTP 規範堅持認為換行符表示為 rn 。因此，jQuery，webkit 和 Firefox 都會出錯。

結果是<textarea> 標籤上的”maxlength” 如果您的 server-side 程式碼實際上具有固定的欄位值的最大大小，則幾乎沒有用。

編輯 – 在這一點 (2014 年底)，Chrome(38) 的行為看起來正確。但 Firefox(33) 仍然不會將每個硬複製計算為 2 個字元。

第四種思路

根據上面的 Pointy 的回答，似乎正確的方法是將所有新行計算為兩個字元。這將標準化瀏覽器，並匹配發布時傳送的內容。

所以我們可以遵循規範，並且替換所有出現的不在後面的新行的運輸回車，以及所有沒有運輸回車的新行，使用回車換行對。

var len = $('#test').val().replace(/r(?!n)|n(?!r)/g, "rn").length;

然後使用該變數顯示 textarea 值的長度，或限制它，等等。

第五種思路

看起來 JavaScript 正在考慮新的行字元的長度。

嘗試使用：


var x = $('#test').val();

x = x.replace(/(rn|n|r)/g,"");    

$('#length').html(x.length);

我用它在你的小提琴，它是工作。希望這可以幫助。

參考文獻

Chrome counts characters wrong in textarea with maxlength attribute

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

Chrome 在使用 maxlength 屬性的 textarea 中計數字符錯誤