jquery 实时判断textarea输入了多少个字，并通过parent,children显示字符数

封面图 • 2025-12-03 • jQuery

你可以使用 jQuery 来实时监听 `textarea` 的输入事件，并通过 `.parent()` 和 `.children()` 方法来获取和更新字符数。下面是一个完整的示例代码：

### HTML
```html
<div class="text-container">
    <textarea id="myTextarea" rows="4" cols="50"></textarea>
    <div class="char-count">0 字</div>
</div>
```

### jQuery
```javascript
$(document).ready(function() {
    $('#myTextarea').on('input', function() {
        var text = $(this).val();
        var charCount = text.length;
        $(this).parent().find('.char-count').text(charCount + ' 字');
    });
});
```

### 说明：
- `$('#myTextarea').on('input', function() { ... })`：监听 `textarea` 的输入事件，包括键盘输入、粘贴等。
- `$(this).val()`：获取当前 `textarea` 中的文本内容。
- `text.length`：获取当前文本的字符数。
- `$(this).parent().find('.char-count')`：找到 `textarea` 的父元素中的 `.char-count` 元素，并更新其内容。

### 可选：限制最大字数
如果你还想限制最大输入字数（比如最多 200 字），可以加上如下逻辑：

```javascript
$(document).ready(function() {
    var maxLength = 200;

$('#myTextarea').on('input', function() {
        var text = $(this).val();
        var charCount = text.length;

if (charCount > maxLength) {
            $(this).val(text.slice(0, maxLength)); // 截断超出部分
            charCount = maxLength;
        }

$(this).parent().find('.char-count').text(charCount + ' 字');
    });
});
```

这样就可以实现 **实时显示字符数** 和 **限制最大输入长度** 的功能了。需要进一步优化或扩展功能也可以告诉我！