cn hx components Input

HxInput / HxWithCheckInput

文本和密码输入框。由 HxInputBox(HxInputInner) 创建——一个通过 HOC 模式包装 <input>、提供前后缀/占位符插槽的组件。

HxWithCheckInput 添加验证功能（参见 WithCheck）。

// 基本文本输入
<HxInput $model={form} $field="username" placeholder="请输入用户名" />

// 密码输入（内置显隐切换）
<HxInput $model={form} $field="password" type="password" />

// 前后缀装饰
<HxInput
  $model={form} $field="search"
  prefix={<MagnifyingGlass />}
  suffix={<Clear onClick={reset} />}
/>

// 延迟更新（仅在失焦时提交）
<HxInput $model={form} $field="title" emitChangeOnBlur />

// 防抖更新
<HxInput $model={form} $field="query" emitChangeDelay={300} />

// 禁用 / 只读
<HxInput $model={form} $field="name" $disabled={(m) => m.locked} />
<HxInput $model={form} $field="code" $readonly={(m) => m.autoGenerated} />

Props

HxInputBox HOC（外层包装）

Prop	类型	默认值	说明
$model	HxObject<T>	—	响应式模型
$field	ModelPath<T> | HxDataPath	—	模型字段路径
placeholder	ReactNode	—	覆盖层占位文本（通过 ResizeObserver 定位）
prefix	ReactNode	—	在 <input> 之前渲染的元素
suffix	ReactNode	—	在 <input> 之后渲染的元素
$disabled	DisabledPropValue<T>	—	(model) => boolean——响应式禁用
$readonly	DisabledPropValue<T>	—	(model) => boolean——响应式只读

HxInputInner（内层 <input>）

Prop	类型	默认值	说明
type	'text' | 'password'	'text'	输入类型。password 通过后缀图标切换显隐
selectAll	boolean	true	获取焦点时全选文本
emitChangeOnBlur	boolean	false	为 true 时，仅在失焦时才更新模型
emitChangeDelay	number	150	防抖延迟（毫秒）。负值会被钳制为 0
toModel	(显示值, context) => 模型值	—	提交前将显示文本转换为模型值；缺省 = 原样传入
fromModel	(模型值, context) => 显示值	asStr	将模型值转换为显示文本；用于格式化非字符串模型值

原生 DOM 事件

常用：onFocus、onBlur（焦点相关的 UI 效果）。onKeyDown（Enter 提交或自定义快捷键）。

可用但通常不需要：onChange、onInput——值变更由 $model/$field 响应式绑定自动处理，显式添加 onChange 大多冗余。

可用：onBeforeInput、onKeyUp、onKeyPress、onClick、onMouseDown、onMouseUp、onMouseEnter、onMouseLeave、onCompositionStart、onCompositionEnd、onCompositionUpdate（IME 事件内部处理）、onTouchStart、onTouchEnd、onPointerDown、onPointerUp。

排除的原生属性：disabled（使用 $disabled）、type（使用组件 type prop）、value、placeholder（使用组件 placeholder prop）、readOnly（使用 $readonly）、height、width、checked、children、minLength、maxLength、required、multiple、pattern、size、color。

其余所有标准 <input> 属性（包括 autoComplete、autoFocus、spellCheck）均透传。

全局配置

import { configHxInput } from '@hx/components';
configHxInput({ selectAll: true, emitChangeDelay: 150 });