行和textarea字段HTML中的列限制 [英] Rows and column limit in textarea field HTML
本文介绍了行和textarea字段HTML中的列限制的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
1. textarea rows limit是6
2. textarea cols limit是20
3. if任何行超过20的长度，如果可用行，该行将分成两行
我的代码：
function limitTextareaLine（e）{
if（e.keyCode == 13
&& $（this）.val（）。split（\\\
） .length> = $（this）.attr（'rows'））{
return false;
}
var result =;
var textArray = $（this）.val（）。split（\\\
）;
alert（textArray.length）;
for（var i = 0; i< textArray.length; i ++）{//无法迭代循环
if（textArray [i] .length> 5）{
alert（ 'AAA'）;
if（textArray.length == 6）{
alert（nnnnn）;
返回false;
}
result + = textArray [i] +\\\
;
} else {
result + = textArray [i];
alert（textArray [i]）
}
（textArray中的var行）{
}
alert（result） ;
$（this）.val（result）;
$（function（）{
$（'textarea.limited'）。keydown（limitTextareaLine）;
}）;
在上面的代码循环中不起作用。只有第一行会迭代。
请建议是否有更好的方法来做到这一点。
我的要求是textarea字段最多有6行，每行的最大字符数是20.如果任何行超过了最大字符数限制，如果可以使用最大行数限制，则将其分成两行。
解决方案
function limitTextareaLine（e）{const newLine = / \r * \\\
/ g; const value = e.target.value; const newLines =（value.match（newLine）|| []）。length; const lines = value.split（newLine）; //输入if（e.keyCode === 13&& line.length> = e.target.rows）{e.preventDefault（）;返回; } const lineNo = value.substr（0，e.target.selectionStart）.split（newLine）.length - 1; （e.keyCode === 8&&〜〜value.charAt（e.target.selectionStart - 1）.search（newLine））{if（lines [lineNo] .length + lines [lineNo - 1 ] .length< = e.target.cols）return; e.preventDefault（）;返回; } // if if（e.keyCode === 46&&〜〜value.charAt（e.target.selectionStart）.search（newLine））{if（lines [lineNo] .length + lines [lineNo + 1] .length< = e.target.cols）return; e.preventDefault（）;返回; } if（e.key.length> 1）return; if（value.length< e.target.cols）return; if（lines [lineNo] .length> e.target.cols - 1）{if（lines.length< e.target.rows）{const col =（e.target.selectionStart - newLines）/ lines.length;让p1 = value.substr（0，e.target.selectionStart）; if（col === e.target.cols）{p1 + ='\r\\\
'+ String.fromCharCode（e.keyCode）; } else {p1 + = String.fromCharCode（e.keyCode）+'\r\\\
'; } e.target.value = p1 + value.substr（e.target.selectionStart，value.length）; e.target.selectionStart = p1.length - 1; e.target.selectionEnd = p1.length - 1; } e.preventDefault（）;返回; }} document.addEventListener（'DOMContentLoaded'，function（）{document.querySelector（'textarea.limited'）。addEventListener（'keydown'，limitTextareaLine）;}）;
.limited {width：200px; height：200px;}
< textarea cols =3 rows =4class =limited>< / textarea>
$ b
我想说我对这段代码完全不满意，而且我非常肯定还有更多的可维护和优雅的方式来做这种事情。
不过，我认为您可以将此作为您如何做你想做的事情的一个例子。
In textarea field i have to implement following restrictions
1. textarea rows limit is 6
2. textarea cols limit is 20
3. if any row exceeded 20 length that row will split in two rows if row available
My Code:
function limitTextareaLine(e) {
if (e.keyCode == 13
&& $(this).val().split("\n").length >= $(this).attr('rows')) {
return false;
}
var result = "";
var textArray = $(this).val().split("\n");
alert(textArray.length);
for (var i = 0; i < textArray.length; i++) { //Unable to iterate loop
if (textArray[i].length > 5) {
alert('aaa');
if (textArray.length == 6) {
alert("nnnnn");
return false;
}
result += textArray[i] + "\n";
} else {
result += textArray[i];
}
alert(textArray[i])
}
for ( var line in textArray) {
}
alert(result);
$(this).val(result);
}
$(function() {
$('textarea.limited').keydown(limitTextareaLine);
});
<textarea rows="6" cols="20" class="limited"></textarea>
In above code loop is not working. Only first line will iterate.
Please suggest if there is any better way to do this.
My requirement is textarea filed have max 6 lines and each line have max char is 20. if any line exceeded the max char limit the split into two lines if max line limit is available.
解决方案
If I understood it right, this may be what you're looking for.
function limitTextareaLine(e) {
const newLine = /\r*\n/g;
const value = e.target.value;
const newLines = (value.match(newLine) || []).length;
const lines = value.split(newLine);
//enter
if (e.keyCode === 13 && lines.length >= e.target.rows) {
e.preventDefault();
return;
}
const lineNo = value.substr(0, e.target.selectionStart).split(newLine).length - 1;
//backspace
if (e.keyCode === 8 && ~value.charAt(e.target.selectionStart - 1).search(newLine)) {
if (lines[lineNo].length + lines[lineNo - 1].length <= e.target.cols) return;
e.preventDefault();
return;
}
//del
if (e.keyCode === 46 && ~value.charAt(e.target.selectionStart).search(newLine)) {
if (lines[lineNo].length + lines[lineNo + 1].length <= e.target.cols) return;
e.preventDefault();
return;
}
if (e.key.length > 1) return;
if (value.length < e.target.cols) return;
if (lines[lineNo].length > e.target.cols - 1) {
if (lines.length < e.target.rows) {
const col = (e.target.selectionStart - newLines) / lines.length;
let p1 = value.substr(0, e.target.selectionStart);
if (col === e.target.cols) {
p1 += '\r\n' + String.fromCharCode(e.keyCode);
} else {
p1 += String.fromCharCode(e.keyCode) + '\r\n';
}
e.target.value = p1 + value.substr(e.target.selectionStart, value.length);
e.target.selectionStart = p1.length - 1;
e.target.selectionEnd = p1.length - 1;
}
e.preventDefault();
return;
}
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('textarea.limited').addEventListener('keydown', limitTextareaLine);
});
.limited {
width: 200px;
height: 200px;
}
<textarea cols="3" rows="4" class="limited"></textarea>
I want to say that I'm totally unhappy with this code and I'm pretty sure there are some more maintainable and elegant way of doing something like this.
Still, I think you can work with this as an example of how you could do what you want.
这篇关于行和textarea字段HTML中的列限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
