Chrome浏览器使用maxlength属性计算textarea中的字符错误
这里是一个例子:
$(function() { $('#test').change(function() { $('#length').html($('#test').val().length) }) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id=test maxlength=10></textarea> length = <span id=length>0</span>
用行(一行一个字符)填充textarea,直到浏览器允许。 完成后,离开textarea,js代码也会计算字符。
所以在我的情况下,我可以input只有7个字符(包括空格)之前铬停止我。 尽pipemaxlength属性的值是10:
当涉及到最大长度时,您的回车符被认为是两个字符。
1\r\n 1\r\n 1\r\n 1
但似乎只有一个(只是我不确定哪一个)加起来只有7个 。
以下是如何让您的JavaScript代码与浏览器认为在textarea中的字符数量相匹配:
$(function () { $('#test').keyup(function () { var x = $('#test').val(); var newLines = x.match(/(\r\n|\n|\r)/g); var addition = 0; if (newLines != null) { addition = newLines.length; } $('#length').html(x.length + addition); }) })
基本上你只是在文本框中计算总的换行符,并为每个字符数加1。
由于未知的原因,jQuery总是将<textarea>
的值中的所有换行符转换为单个字符。 也就是说,如果浏览器给它一个换行符,那么jQuery确保.val()
的返回值只是\n
。
Chrome和Firefox都以“maxlength”为目的来计算<textarea>
标签的长度。
但是,HTTP规范坚持认为换行符表示为\r\n
。 因此,jQuery,Webkit和Firefox都会出错。
结果是<textarea>
标签上的“maxlength”几乎没有用,如果你的服务器端代码真的有一个固定的字段值的最大值。
编辑 – 在这一点上(2014年底),看起来像铬(38)行为正确。 然而,Firefox(33)仍然不会将每个硬回归计为2个字符。
根据上面的Pointy的回答,似乎正确的方法是将所有新行计为两个字符。 这将在浏览器中将其标准化,并匹配发布时将发送的内容。
因此,我们可以按照规范进行更换,而不是换行后面的所有换行,以及所有换行后没有换行的换行,换行符 – 换行符。
var len = $('#test').val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length;
然后使用该variables显示textarea值的长度,或限制它,等等。
看来javascript也在考虑新行字符的长度。
尝试使用:
var x = $('#test').val(); x = x.replace(/(\r\n|\n|\r)/g,""); $('#length').html(x.length);
我用它在你的小提琴,它正在工作。 希望这可以帮助。
那是因为一个新行实际上是2个字节,因此2个长。 JavaScript没有这样看,所以它只会计算1,总共7(3个新行)
这是一个更通用的解决scheme,它覆盖了jQuery的'val'函数。 将这个问题变成一个博客文章不久,并在这里链接。
var originalVal = $.fn.val; $.fn.val = function (value) { if (typeof value == 'undefined') { // Getter if ($(this).is("textarea")) { return originalVal.call(this) .replace(/\r\n/g, '\n') // reduce all \r\n to \n .replace(/\r/g, '\n') // reduce all \r to \n (we shouldn't really need this line. this is for paranoia!) .replace(/\n/g, '\r\n'); // expand all \n to \r\n // this two-step approach allows us to not accidentally catch a perfect \r\n // and turn it into a \r\r\n, which wouldn't help anything. } return originalVal.call(this); } else { // Setter return originalVal.call(this, value); } };
var value = $('#textarea').val(); var numberOfLineBreaks = (value.match(/\n/g)||[]).length; $('#textarea').attr("maxlength",500+numberOfLineBreaks);
在IE上完美的工作已经在IE中避免脚本! 在IE中,“折线”只计算一次,所以在IE中避免这个解决scheme!
如果您想获取文本区域的剩余内容长度,则可以在包含换行符的string上使用匹配。
HTML:
<textarea id="content" rows="5" cols="15" maxlength="250"></textarea>
JS:
var getContentWidthWithNextLine = function(){ return 250 - content.length + (content.match(/\n/g)||[]).length; }
Textareas在浏览器中仍然没有完全同步。 我注意到两个主要问题:回车和字符编码
回车
默认情况下被操作为2个字符\ r \ n (Windows风格)。
问题在于Chrome和Firefox会将其统计为一个字符。 你也可以select它来观察有一个被选作空间的隐藏字符。
解决方法在这里find:
var length = $.trim($(this).val()).split(" ").join("").split('\n').join('').length;
当用户types换行符时,jquery字数将被计算
另一方面,Internet Explorer会将其计为2个字符。
他们的代表是:
二进制: 00001101 00001010
hex: 0D0A
,用UTF-8表示为2个字符,最大长度为2个字符。
HTML实体可以
1)从JavaScript代码创build:
<textarea id='txa'></textarea> document.getElementById("txa").value = String.fromCharCode(13, 10);
2)从textarea的内容parsing:
Ansi代码: &#13;&#10;
<textarea>Line one. Line two.</textarea>
3)从键盘inputEnter键
4)定义为文本框的多行内容
<textarea>Line one. Line two.</textarea>
字符编码
像textarea这样的input字段的字符编码是独立于页面的字符编码的。 如果您打算计算字节数,这一点很重要。 所以,如果你有一个元头来定义页面的ANSI编码(每个字符1个字节),那么你的文本框的内容仍然是每个字符2个字节的UTF-8。
这里提供了字符编码的解决方法:
function htmlEncode(value){ // Create a in-memory div, set its inner text (which jQuery automatically encodes) // Then grab the encoded contents back out. The div never exists on the page. return $('<div/>').text(value).html(); } function htmlDecode(value){ return $('<div/>').html(value).text(); }
从input字段读取属性时,HTML编码丢失