问题:
我试图限制文本框中每行的行数和字母数。
到目前为止我得到了什么:
到目前为止,我设法使用此限制行计数:
var text = $(this).val();
var lines = text.split("\n");
if(e.keyCode == 13 && lines.length >= $(this).attr('rows')) {
return false;
}
如果达到行数限制,则不允许用户按回车键(keyCode 13)。
问题:
现在我也试图限制一行中的字母数量,因为如果我到达我的textarea的末尾(带有返回键)我仍然可以持有一个字母/写入大量文本,当它到达时它将跳转到另一行行结束。这样,这种限制可能会被“欺骗”,我正在寻找解决方案。
我的想法,而不是解决问题:
else{
for(var i = 0; i < lines.length && e.keyCode != 13; i++) {
if(lines[i].length >= $(this).attr('cols')) {
return false; // prevent characters from appearing
}
}
}
我试过这个来限制字母数量。这有效,但它有缺陷。如果我在一行中达到最大字母数( ANY ),我 CANT TYPE IN ANPET 了。
我不知道如何只检查我现在正在输入的行。
答案 0 :(得分:5)
在chrome中测试过: http://jsfiddle.net/3e3EH/1/
$(document).ready(function(){
var textArea = $('#foo');
var maxRows = textArea.attr('rows');
var maxChars = textArea.attr('cols');
textArea.keypress(function(e){
var text = textArea.val();
var lines = text.split('\n');
if (e.keyCode == 13){
return lines.length < maxRows;
}
else{
var caret = textArea.get(0).selectionStart;
console.log(caret);
var line = 0;
var charCount = 0;
$.each(lines, function(i,e){
charCount += e.length;
if (caret <= charCount){
line = i;
return false;
}
//\n count for 1 char;
charCount += 1;
});
var theLine = lines[line];
return theLine.length < maxChars;
}
});
});
正如jbabey指出的那样,ctrl + v或右键单击 - &gt;粘贴可能是一个问题。右键单击很容易被阻止。对于ctrl + v,你可能也可以检测到它... 只是禁用javascript也会明显打破这个问题。 无论如何,作为任何客户端验证,您必须在服务器端进行双重检查。
答案 1 :(得分:5)
这就是我想出的。相当干净,似乎适用于我可以提供的所有测试。
JavaScript的:
$(function () {
$('textarea').on('keypress', function (event) {
var text = $('textarea').val();
var lines = text.split("\n");
var currentLine = this.value.substr(0, this.selectionStart).split("\n").length;
console.log(lines);
console.log(currentLine);
console.log(lines[currentLine - 1]);
if (event.keyCode == 13) {
if (lines.length >= $(this).attr('rows')) return false;
} else {
if (lines[currentLine - 1].length >= $(this).attr('cols')) {
return false; // prevent characters from appearing
}
}
});
});
HTML:
<textarea rows="10" cols="15"></textarea>
答案 2 :(得分:2)
不是遍历每一行,而是获取光标的当前行号,并仅检查该行的字符长度。有关实施细节,请参阅此SO answer。
然后将您的else语句更改为:
else{
var currLine = getLineNumber();
if (lines[currLine].length >= $(this.attr('cols')) {
return false; // prevent characters from appearing
}
}
答案 3 :(得分:0)
有点晚了,但我制作了这个插件https://github.com/luisdalmolin/jquery-limitLines。
有时可能有用。