Svelte组件输入文本长度值不更新始终显示0/1000问题求助

1. 文本长度始终显示0/1000的问题 #

你在模板里直接写死了0作为当前长度，没有读取绑定变量的长度值。把模板里的：

<span>0/{maxLength}</span>

改成：

<span>{value.length}/{maxLength}</span>

（这里的value是你绑定到textarea的变量名，要和script里声明的一致）

2. 长度超限错误提示不生效的问题 #

你没正确使用Svelte的条件渲染语法：

• 用{#if}包裹错误提示内容，根据文本长度动态显示/隐藏：

{#if value.length > maxLength}
  <p style="color: red;">文本长度超过1000字符限制！</p>
{/if}

• 确认判断时用的变量和textarea绑定的是同一个，比如都是value，不要写错变量名。

修复后的核心代码示例 #

<script>
  let value = '';
  const maxLength = 1000;
</script>

<div>
  <textarea bind:value placeholder="输入文本..." />
  <div>
    {value.length}/{maxLength}
  </div>
  {#if value.length > maxLength}
    <p style="color: red;">文本长度不能超过{maxLength}字符</p>
  {/if}
</div>

关键提醒 #

• 必须通过bind:value把输入控件和script里的变量绑定，这样输入内容变化时变量才会自动更新。
• Svelte的响应式更新依赖模板里对变量的引用，所以长度显示要直接用value.length，不能写死数值。

内容的提问来源于stack exchange，提问作者alexandr2006