JavaScript实现文本框字数限制与实时显示

HTML结构与事件绑定

首先查看HTML结构部分：

<textarea name="description" onkeyup="checkLength(this);"></textarea>

<br /><small>文字最大长度: 250. 还剩: <span id="chLeft">250</span>.</small>

可以看到，onkeyup事件在用户按键释放后触发，并将当前元素对象（即this，代表所在的文档区域）作为参数传递。

JavaScript核心逻辑实现

接下来结合JavaScript代码进行具体分析：

<script type="text/javascript">

function checkLength(which) {

var maxChars = 250;

if (which.value.length > maxChars)

which.value = which.value.substring(0,maxChars);

var curr = maxChars - which.value.length;

document.getElementById("chLeft").innerHTML = curr.toString();

</script>

函数内部首先定义了maxChars变量，用于指定输入区内允许的最大字符数。需要注意的是，该变量是一个参与计算的数值类型。

随后，从传入的参数中获取textarea内已输入的字符长度，并将其与之前设定的最大长度maxChars进行比较。

如果输入的字符长度超过了预设范围，则使用substring方法强制限制其长度。其中substring(0, maxChars)表示截取从第0个字符到maxChars个字符之间的内容，从而确保输入长度不超过上限。

语句var curr = maxChars - which.value.length;用于计算当前还可以输入多少个字符，并将结果保存在变量curr中。

最后，通过getElementById方法定位到HTML中id为chLeft的元素（在此例中为span标签），利用toString方法将数值curr转换为字符串，并将其赋值给span的innerHTML，从而在页面上实时反馈剩余可用字符数。