<html>
<style type="text/css">
.progress{
width: 1px;
height: 14px;
color: white;
font-size: 12px;
overflow: hidden;
background-color: navy;
padding-left: 5px;
}
</style>
<script type="text/JavaScript">
//more javascript from http://www.smallrain.net
function textCounter(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = parseInt(field.offsetWidth);
var charcnt = field.value.length;
// trim the extra text
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);
}
else {
// progress bar percentage
var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="Limit: "+percentage+"%"
// color correction on style from CCFFF -> CC0000
setcolor(document.getElementById(counter),percentage,"background-color");
}
}
function setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
<form>
<textarea rows="5" cols="40" name="maxcharfield" id="maxcharfield"
onKeyDown="textCounter(this,'progressbar1',20)"
onKeyUp="textCounter(this,'progressbar1',20)"
onFocus="textCounter(this,'progressbar1',20)" ></textarea><br />
<div id="progressbar1" class="progress"></div>
<script>textCounter(document.getElementById("maxcharfield"),"progressbar1",20)</script>
</form>
</html>
分享到：
相关推荐
在HTML中，`<textarea>`元素用于创建一个多行文本输入区域，用户可以在其中输入大量文本。这个元素常用于表单提交，允许用户输入长段落或者自由格式的数据。`textarea`标签通常与`<form>`元素一起使用，以便收集用户...
在网页设计中，`<textarea>`元素用于创建一个多行文本输入区域，用户可以在其中输入大量文本。然而，有时候我们需要对用户能输入的字符数进行限制，以满足特定的需求，例如防止数据库存储过量数据或者保持页面布局的...
与`<input type="text">`不同，`<textarea>`可包含多行文本，并在用户界面上显示为一个可滚动的文本区域。它常用于在线论坛、评论区以及需要用户输入更长文本的地方。开发者常常需要限制用户在`<textarea>`中输入的...
总结来说，通过本文介绍的使用jQuery实现textarea输入框限制字数的方法，开发者可以很容易地在他们的网页应用中实现这一功能，从而提高用户体验和满足特定的业务需求。这种方法不仅有效，而且在实时性和交互性方面都...
3. **计算剩余字数**：在`updateRemainingChars`函数中，我们需要计算用户当前输入的字符数，并从最大允许的字数中减去这个数，得到剩余字数。 ```javascript function updateRemainingChars() { var maxChars = ...
// 获取文本区域元素和最大长度限制 var oTextArea = document.getElementById("textarea1"); var maxText = oTextArea.getAttribute("maxlength"); // 计算输入文本的长度 var len = oTextArea.value.length...
当用户在表单字段（如文本框`<input type="text">`或文本区域`<textarea>`）中输入时，可以使用JavaScript监听`keyup`、`keydown`或`input`事件来实时检测并限制输入的字符数。以下是一个简单的例子，限制输入最多...
在网页设计中，多行文本框（`<textarea>`元素）常常用于...虽然没有直接涉及按钮，但你可以将这个限制字数的功能与其他表单按钮（如提交按钮）结合，例如，使提交按钮在超过字数限制时禁用，以提供更完整的用户体验。
在Web开发中，限制用户在文本区域（textarea）中输入的字符数量是一种常见的需求，尤其是在需要限制输入长度的场景，如微博、评论等。使用jQuery库可以非常简便地实现这样的功能。下面将详细介绍使用jQuery实现限制...
在网页开发中，有时我们需要为用户提供输入文本的区域，如评论、留言等，这时`textarea`元素就派上了用场。然而，为了限制用户输入的字符数并提供友好的用户体验，我们通常会在`textarea`下方显示剩余可输入的字数。...
jQuery maxlength插件用于在网页中实现文本字段（如文本框和文本区域）的字数限制。该插件提供即时的字符数反馈，类似于Twitter等微博客平台上的功能。当用户输入时，字符数会被实时计算，并显示剩余可用的字符数。 ...
在讨论如何通过JavaScript对网页中的文本输入框（textbox）或文本区域（textarea）进行字符长度限制时，我们首先要了解几个关键概念。文本输入框通常用于输入单行文本，而文本区域则可以输入多行文本。在Web前端开发...
为了提高用户体验，可以使用JavaScript对`textarea`进行更复杂的操作，如限制输入字符数、实时字数统计、自动换行等。此外，还可以利用HTML5的`placeholder`属性提供提示信息： ```html <textarea cols="60" rows=...
在本文中，我们将通过编写一个简单的HTML页面，并在其中应用jQuery脚本来实现限制字数和提示剩余字数的功能。具体实现步骤如下： 1. 创建HTML页面，并引入jQuery库。页面中需要包含一个文本区域（textarea）供用户...
在网页设计中，有时我们需要对用户输入的文本进行限制，比如限制`Textarea`文本域内的字符数量。本文将详细介绍如何使用JavaScript实现这一功能。 首先，`Textarea`是HTML中的一个元素，用于创建多行文本输入区域，...
在给定的压缩包文件中，"控制TextArea的字数.html"这个文件名暗示了一个关键知识点——如何在JavaScript中控制HTML文本区域（TextArea）的输入字数。在网页设计中，我们经常需要限制用户在TextArea中输入的文字数量...
在提供的示例中，`<textarea>`有一个`id="test"`，并且绑定了`onKeyUp`事件，而字数显示区域是一个`<span>`，`id="num"`。 6. **兼容性与优化**：虽然这个简单的实现适用于大多数现代浏览器，但在处理特殊字符、...
在JavaScript代码部分定义了一个名为textCounter的函数，该函数实现了对textarea输入框中字符数量的控制。函数接收三个参数：field（输入框对象），countfield（显示剩余字符的字段对象），maxlimit（最大字符限制）...
2. **初始化编辑器**：在网页中定义一个textarea元素，通过JavaScript调用eWebEditor的初始化方法，将textarea转换为富文本编辑器。 3. **设置与配置**：根据实际需求，可以通过配置项调整编辑器的行为，如设置图片...
在"文字字数判断"场景中，JavaScript可以监听用户在输入框（input）或文本区域（textarea）中的输入行为，实时计算字符数，并在达到预设限制时进行相应的操作，如阻止进一步输入或自动删除超出部分。 jQuery是一个...