input —— 輸入框

Esta página aún no está disponible en tu idioma.

輸入框是表單的基石。core/input 管四件事：字數統計的顯示與計算、超長輸入的截斷、按尺寸檔的內聯樣式、以及輸入框的無障礙屬性包。它刻意不碰驗證（那是 core/form 的職責）和防抖（那是 UI 層響應式的事）。

何時使用

各端實作 LhInput（含 textarea 變體：--textarea 修飾類）。
需要在自訂輸入控制項上複用同一套字數統計與 aria 屬性。
不該用它：數字輸入用 core/input-number（有步進與鉗制），時間用 core/time-picker，日期用 core/date-picker。

匯入方式

import {
  getWordCount,
  shouldShowWordLimit,
  clampString,
  getInputStyle,
  getInputAria,
} from '@lh-ui/share/core/input'
import type { LhInputState } from '@lh-ui/share/core/input'

設計意圖

getWordCount 的兩個邊界都來自真實的跨端差異：

value 為 undefined 時計數兜底為 0——React/uniapp 在掛載前受控值可能短暫為 undefined，undefined.length 會直接崩。
maxlength 為 undefined 時上限顯示 ∞，而不是 'undefined'。這個符號讓「沒設上限」在視覺上明確，而不是看起來像 bug。

getInputStyle 的尺寸樣式是內聯的而非類別名：lh-ui 的輸入框支援 ConfigProvider 全域尺寸，而全域尺寸的切換不需要重新算類別名——內聯樣式隨 props 重算即可。注意這裡的尺寸映射與按鈕不同（按鈕走類別名），是各元件歷史演化的結果。

函式表

函式	簽名	傳回	作用
`getWordCount`	`(state: Pick<LhInputState, 'value' \| 'maxlength'>) => string`	`"已用/上限"`	字數統計字串
`shouldShowWordLimit`	`(state: Pick<LhInputState, 'maxlength' \| 'minlength'>) => boolean`	布林	設了 maxlength 或 minlength 就顯示統計
`clampString`	`(value: string, maxlength?: number) => string`	字串	超長截斷
`getInputStyle`	`(size: string) => Record<string, string>`	內聯樣式	按尺寸檔映射 padding/字級
`getInputAria`	`(options: { label?: string; describedby?: string; invalid?: boolean; required?: boolean }) => LhAriaAttrs`	aria 屬性包	按需輸出四屬性

getInputStyle 的檔位映射：mini padding 4px 8px / 字級 12，small 6px 10px / 12，medium 8px 12px / 14，large 12px 16px / 16；未知 size 兜底 medium。

類型定義

export interface LhInputState {
  value: string
  size: LhComponentSize
  maxlength: number | undefined
  minlength: number | undefined
}

無障礙

getInputAria 的四個屬性都是按需掛載（真值才輸出，假值不出現鍵）：

getInputAria({ label: '用户名', required: true })
// { 'aria-label': '用户名', 'aria-required': true }

getInputAria({ invalid: true, describedby: 'lh-form-error-username' })
// { 'aria-invalid': true, 'aria-describedby': 'lh-form-error-username' }

與 core/form 的連動是關鍵用法：LhFormItem 渲染錯誤提示元素（id 由 getFormFieldErrorId(prop) 生成），把該 id 透過 describedby 傳進來，螢幕閱讀器就會播報「無效輸入，錯誤是……」。見 form。

使用範例

import { getWordCount, clampString, getInputAria } from '@lh-ui/share/core/input'

getWordCount({ value: 'hello', maxlength: 10 })   // '5/10'
getWordCount({ value: 'hello', maxlength: undefined })  // '5/∞'
getWordCount({ value: undefined, maxlength: 10 })       // '0/10'
clampString('abcdef', 3)   // 'abc'
clampString('abcdef')      // 'abcdef'（無上限原樣傳回）
getInputAria({ label: '搜索' })  // { 'aria-label': '搜索' }

<!-- Vue3 -->
<div :class="['lh-input', `lh-input--${size}`, { 'lh-input--textarea': type === 'textarea' }]">
  <div class="lh-input__wrapper">
    <input
      class="lh-input__inner"
      :style="getInputStyle(size)"
      v-bind="getInputAria({ label, describedby, invalid: !!error, required })"
    />
  </div>
  <span v-if="shouldShowWordLimit({ maxlength, minlength })" class="lh-input__count">
    {{ getWordCount({ value, maxlength }) }}
  </span>
</div>

// React
const aria = getInputAria({ label, describedby, invalid: !!error, required })
return (
  <div className={`lh-input lh-input--${size}`}>
    <div className="lh-input__wrapper">
      <input className="lh-input__inner" style={getInputStyle(size)} {...aria} />
    </div>
  </div>
)

// uniapp：<input> 是內置組件，class 與 style 綁定都支援；
// textarea 用 <textarea> 組件，字數統計在非 h5 端由組件自帶屬性 count 接管

樣式與令牌

類別名	語義
`.lh-input`	基礎類
`.lh-input--{mini\|small\|medium\|large}`	尺寸檔
`.lh-input--textarea`	textarea 變體
`.lh-input--disabled` / `.lh-input--prefix` / `.lh-input--suffix`	狀態與插槽
`.lh-input__wrapper`	包裹層（邊框、聚焦態）
`.lh-input__wrapper--focused` / `--disabled` / `--has-label`	包裹層狀態
`.lh-input__inner`	原生輸入元素
`.lh-input__label` / `--float`	浮動標籤（material 風格）
`.lh-input__prefix` / `__suffix`	前後插槽（圖示、按鈕）
`.lh-input__clear` / `__count`	清除按鈕 / 字數統計

聚焦邊框色走 var(--lh-primary-color)，錯誤態 var(--lh-danger-color)。

注意事項

--has-label 的非對稱 padding：帶浮動標籤時 padding-top 是 16px（給標籤留位），其餘檔位對稱。這是「高度令牌專項」記錄的待統一項。
控制項高度不統一：input 37px / select 32px / cascader 27→32px 等，根因是 var.scss 缺 --lh-control-height-* 令牌（同上，待後續 changeset）。
maxlength 的「字元」語義：clampString 用 slice，按 UTF-16 碼元計數；emoji 增補平面字元會計 2。UI 層若需按碼點計數自行處理。
不要用 getInputStyle 的傳回值覆蓋 sx——sx 優先級更高，兩者應合併而非覆蓋。

@lh-ui/share/core/input → getWordCount( )

返回值

（填好参数后点运行）