SolidJS中点击按钮切换密码输入框type属性失效问题求助

你的代码里有三个关键错误导致密码显示/隐藏功能失效：

• 信号初始化错误：你用空字符串""初始化hidden信号，布尔判断时空字符串会被视为false，且不符合切换状态的布尔逻辑，应该用布尔值true（默认隐藏密码）。
• type计算逻辑错误：你判断的是setHidden（信号的setter函数）而非信号的当前值hidden()，函数在JS中永远为真，所以type永远是password，不会随点击切换。
• type目标值错误：输入框的type属性没有name这个可选值，要显示明文应该用text。

修复后的完整代码片段：

export default function Login() {
  // 初始化布尔信号，默认隐藏密码
  const [hidden, setHidden] = createSignal(true);
  // 根据信号值动态计算输入框type
  const type = hidden() ? 'password' : 'text';
  
  function toggle() {
    setHidden((prev) => !prev);
  }

  return (
    // ... 其他代码
    <div className="flex flex-col space-y-2">
      <label htmlFor="password">Password</label>
      <input
        id="password"
        type={type}
        name="password"
        className="rounded-lg dark:bg-gray-700"
        value={form.password}
        onInput={handleInput}
        required
      /> 
      <Show when={form.password.trim().length > 0}>
        <button onClick={toggle}>
          <Show when={hidden()} fallback={<AiFillEye className="text-xl" />}>
            <AiFillEyeInvisible className="text-xl" />
          </Show>
        </button>
      </Show>
    </div>
    // ... 其他代码
  );
}

额外优化点：

• onInput={[handleInput]}可以简化为onInput={handleInput}，SolidJS中事件绑定不需要包裹数组（除非需要传递额外参数）。
• 给输入框加上id="password"，让标签的htmlFor属性和输入框正确关联，提升可访问性。

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