请参看代码，实现的功能如题：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="description" content="Script to count and limit the number of lines and characters in a textarea">
<meta name="keywords" content="textarea, rows, lines, characters, limit, restrict, js, javascript, jscript">
<script type="text/javascript">
<!--
function getLines(txtArea)
{
var lineHeight = parseInt(txtArea.style.lineHeight.replace(/px/i,''));
var tr = txtArea.createTextRange();
return Math.ceil(tr.boundingHeight/lineHeight);
}
function checkLimits(txtArea)
{
var maxLines = txtArea.rows;
var maxChars = txtArea.rows * txtArea.cols;
if((txtArea.value.length >= maxChars || getLines(txtArea) >= maxLines)
&& (window.event.keyCode == 10 || window.event.keyCode == 13))
{
while(getLines(txtArea) > maxLines)
txtArea.value = txtArea.value.substr(0,txtArea.value.length-2);
while(txtArea.value.length > maxChars)
txtArea.value = txtArea.value.substr(0,txtArea.value.length-2);
//alert("limits reached");
}
else if(txtArea.value.length > maxChars )
{
while(txtArea.value.length > maxChars)
txtArea.value = txtArea.value.substr(0,txtArea.value.length-1);
//alert("chars limit reached");
}
else if (getLines(txtArea) > maxLines)
{
while(getLines(txtArea) > maxLines)
txtArea.value = txtArea.value.substr(0,txtArea.value.length-1);
//alert("lines limit reached");
}
}
//-->
</script>
</head>
<body style="font-family:arial;">
<form name="myForm" method="post" action="">
<span style="textalign:left;">
<b>Limited Textarea</b> (cols = 44; rows = 4)
<br>
<br>
<textarea name="myText" id="myText" cols="44" rows="4" wrap="virtual"
style="font-family:arial; font-size:14px; line-height:17px; height:98px; overflow:auto;"
onKeyUp="checkLimits(this);"
onPaste="checkLimits(this);"
onCut="checkLimits(this);"
onBlur="checkLimits(this);"></textarea>
<br>
</span>
</form>
</body>
</html>
分享到：
相关推荐
- `rows`：指定`textarea`的高度（行数）。 - `cols`：设置`textarea`的宽度（列数）。 - 内部的文本是默认显示的内容，当用户打开页面时会看到这些文字。 ### 2. 表单数据的编码 在表单提交时，`textarea`内的...
为了获得更一致的跨浏览器表现，推荐使用CSS来精确控制`textarea`的高度和宽度。例如： ```html <textarea id="myTextarea" cols="60" rows="6">文本内容</textarea> #myTextarea { width: 300px; height: 200...
它是一个可以容纳多行文本的HTML元素，通常配合`rows`和`cols`属性来设定初始的行数和列数。例如： ```html <textarea id="myTextarea" rows="4" cols="50"></textarea> ``` 接下来，我们将使用JavaScript来监控这...
通过`<textarea>`标签，我们可以创建一个TextArea，并设置其属性如`rows`和`cols`来定义显示的行数和列数。例如： ```html <textarea id="myTextArea" rows="5" cols="30"></textarea> ``` 接下来，我们用...
以上知识点详细解释了如何使用JavaScript监听鼠标事件来控制textarea输入框中的字符数，并提供了实现该功能的具体代码示例和逻辑说明。这些知识点不仅涉及了前端开发的基本概念，还展示了如何通过编程实现具体的用户...
- **用户体验**：除了自动调整高度外，还可以考虑增加其他功能来提升用户体验，例如实时字数统计、输入提示等。 综上所述，通过合理的HTML结构配合JavaScript逻辑，可以轻松实现文本域自动适应高度的功能。这不仅...
这里的`rows`属性定义了文本域的可见行数，`cols`定义了每行的可见字符数。`id`属性用于唯一标识这个元素，方便通过JavaScript或其他脚本语言进行操作。 在描述中提到的HTML和CSS的结合，可以用来美化和增强`...
3. **文本域**：`<el-input>`组件加上`type="textarea"`变为多行文本输入，`rows`用于指定行数，`autosize`可使高度随内容自适应，还可以通过`:autosize="{minRows: 2, maxRows: 4}"`设置最小和最大行数。...
3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 ...
3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 ...
20. **Windows文件属性**：在Windows中，右键点击文件图标查看属性，可以得到文件大小、修改日期等信息，但一般不直接显示字数、行数。 21. **软件需求分析**：需求获取、需求分析、编写需求规格说明书之后，还需要...
3. 查看文件属性：在 Windows 中，右键点击文件图标只能查看基本信息，如大小、创建日期等，但通常无法查看字数和行数。 4. 创建图表报表：在报表设计中，如果希望创建包含图表的报表，应使用图表式报表向导。 5. ...