• input 輸入框
  • 屬性說明
    • type 有效值
    • confirm-type 有效值
  • 示例
    • 代碼示例 1：基礎(chǔ)用法
    • 代碼示例 2：自定義輸入控制
    • 代碼示例 3：自定義輸入內(nèi)容
    • 代碼示例 4：自定義占位符顏色
    • 代碼示例 5：實時獲取輸入值
  • Bug & Tip

input 輸入框

解釋：輸入框。v3.105.0 起支持同層渲染。
Web 態(tài)說明：在 Web 態(tài)中，受瀏覽器限制，部分瀏覽器不支持自動獲取焦點。如：safari 瀏覽器、chrome 瀏覽器；受設備系統(tǒng)或輸入法限制，confirm-type 值無法修改鍵盤右下角按鈕文字，右下角按鈕內(nèi)容由設備系統(tǒng)或輸入法決定。

屬性說明

value

String

否

輸入框的初始內(nèi)容。若要動態(tài)設置輸入框內(nèi)容，需設置value=”{= value =}”（注：若要取鍵盤輸入后的 value 請通過 bindinput 獲取）

type

String

text

否

input 的類型

password

Boolean

false

否

是否是密碼類型

placeholder

String

否

輸入框為空時占位符。其樣式暫時只支持設置 font-size、font-weight、color

placeholder-style

String

否

placeholder 的樣式

placeholder-class

String

input-placeholder

否

placeholder 的樣式類

disabled

Boolean

false

否

是否禁用

maxlength

Number

140

否

最大輸入長度，設置為 -1 的時候不限制最大長度

cursor-spacing

Number

0

否

指定光標與鍵盤的距離（單位：px）。當鍵盤彈出時， 如果需要頁面上滑才能完整顯示 input 組件, 那么此時光標與鍵盤的距離為設定的 cursor-spacing 值； 如果 input 組件處于屏幕上方，鍵盤彈出時不會擋住 input， 則忽略該屬性

受限于設備系統(tǒng)，暫不支持

focus

Boolean

false

否

獲取焦點，調(diào)起鍵盤
開發(fā)者工具暫不支持自動獲取焦點

部分瀏覽器下不支持自動獲取焦點

confirm-type

String

done

否

設置鍵盤右下角按鈕的文字。其最終表現(xiàn)與手機輸入法本身的實現(xiàn)有關(guān)，部分安卓系統(tǒng)輸入法和第三方輸入法可能不支持或不完全支持

暫不支持

confirm-hold

Boolean

false

否

點擊鍵盤右下角按鈕時是否保持鍵盤不收起

cursor

Number

否

指定 focus 時的光標位置，自動聚焦時才會生效
開發(fā)者工具暫不支持

selection-start

Number

-1

否

光標起始位置，自動聚焦時有效，需與 selection-end 搭配使用

selection-end

Number

-1

否

光標結(jié)束位置，自動聚焦時有效，需與 selection-start 搭配使用

adjust-position

Boolean

true

否

鍵盤彈起時，是否自動上推頁面

受限于設備系統(tǒng)，暫不支持

bindinput

EventHandle

否

當鍵盤輸入時，觸發(fā) input 事件，event.detail = {value, cursor, keyCode}，keyCode 為鍵值。暫不支持處理函數(shù)直接 return 一個字符串

bindfocus

EventHandle

否

輸入框聚焦時觸發(fā)，event.detail = {value: value, height: height}，height 為鍵盤高度

bindblur

EventHandle

否

輸入框失去焦點時觸發(fā)，event.detail = {value: value}

bindconfirm

EventHandle

否

點擊完成按鈕時觸發(fā)，event.detail = {value: value}

type 有效值

text

文本輸入鍵盤

number

數(shù)字輸入鍵盤

idcard

身份證輸入鍵盤

受設備系統(tǒng)或輸入法限制，一些設備（如，帶原生輸入法的 iOS 設備）不支持

digit

帶小數(shù)點的數(shù)字鍵盤

受設備系統(tǒng)或輸入法限制，一些設備（如，帶原生輸入法的 iOS 設備）不支持

confirm-type 有效值

send

鍵盤右下角按鈕為“發(fā)送”

search

鍵盤右下角按鈕為“搜索”

next

鍵盤右下角按鈕為“下一個”

go

鍵盤右下角按鈕為“前往”

done

鍵盤右下角按鈕為“完成”

請根據(jù)需要錄入的內(nèi)容類型合理設置 input 組件的 type 值，降低用戶操作成本，提升用戶錄入體驗

示例

跳轉(zhuǎn)編輯工具

在開發(fā)者工具中打開

在 WEB IDE 中打開

掃碼體驗

代碼示例

請使用百度APP掃碼

代碼示例 1：基礎(chǔ)用法

• SWAN
• CSS

 
 
 
  
  
  
  
  
  
 
  
  
  
 基礎(chǔ)用法
  
  
  
 
  
  
  
 
  
  
  
 
 

代碼示例 2：自定義輸入控制

• SWAN
• JS

 
 
 
  
  
  
  
  
  
 
  
  
  
 自定義輸入控制
  
  
  
 
  
  
  
 自動聚焦
  
  
  
 
  
  
  
 
  
  
  
 placeholder='focus="true"'
  
  
  
 selection-start="3"
  
  
  
 selection-end="7"
  
  
  
 focus="{{true}}"
  
  
  
 confirm-hold="false"
  
  
  
 confirm-type="send"
  
  
  
 bindfocus="bindKeyfocus" />
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 控制長度
  
  
  
 
  
  
  
 
  
  
  
 cursor="100"
  
  
  
 bindblur="bindKeyblur"
  
  
  
 bindconfirm="bindKeyconfirm"
  
  
  
 placeholder='maxlength="10"'
  
  
  
 maxlength="10" />
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 禁用
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 帶有內(nèi)容
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

代碼示例 3：自定義輸入內(nèi)容

• SWAN
• JS

 
 
 
  
  
  
  
  
  
 
  
  
  
 自定義輸入內(nèi)容
  
  
  
 
  
  
  
 文本
  
  
  
 
  
  
  
 
  
  
  
 type="text"
  
  
  
 placeholder='type="text"'
  
  
  
 bindinput="{{!isWeb ? '': 'keyBoardText'}}"
  
  
  
 value="{= textValue =}" />
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 數(shù)字
  
  
  
 
  
  
  
 
  
  
  
 type="number"
  
  
  
 placeholder='type="number"'
  
  
  
 bindinput="{{!isWeb ? '': 'keyBoardNumber'}}"
  
  
  
 value="{= numberValue =}" />
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 身份證
  
  
  
 
  
  
  
 
  
  
  
 type="idcard"
  
  
  
 adjust-position="true"
  
  
  
 placeholder='type="idcard"'
  
  
  
 bindinput="{{!isWeb ? '': 'keyBoardCard'}}"
  
  
  
 value="{= cardValue =}" />
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 小數(shù)
  
  
  
 
  
  
  
 
  
  
  
 type="digit"
  
  
  
 placeholder='type="digit"'
  
  
  
 bindinput="{{!isWeb ? '': 'keyBoardDigit'}}"
  
  
  
 value="{= digitValue =}" />
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

設計指南

錯誤使用 input 組件的 type 值，會額外增加用戶操作成本，影響輸入轉(zhuǎn)化。

錯誤

輸入身份證信息時調(diào)起默認文本鍵盤，用戶需要切換至數(shù)字鍵盤輸入，再切換至字母鍵盤輸入英文字母，共進行 3 次鍵盤切換才能順利完成身份證信息輸入。

代碼示例 4：自定義占位符顏色

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 自定義占位符顏色
  
  
  
 
  
  
  
 placeholder-style=
  
  
  
 color:"#3388FF"
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 class="normalInput"
  
  
  
 placeholder-class="placeholder"
  
  
  
 placeholder-style="color:#3388FF"
  
  
  
 placeholder="請在此輸入" />
  
  
  
 
  
  
  
 
 

代碼示例 5：實時獲取輸入值

• SWAN
• JS

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 實時獲取輸入值
  
  
  
 bindinput="bindKeyInput"
  
  
  
 
  
  
  
 {{inputValue}}
  
  
  
 
  
  
  
 
  
  
  
 
 

Bug & Tip

• Tip：input 組件是一個原生組件，字體是系統(tǒng)字體，所以無法設置 font-family 。
• Tip：在 input 聚焦期間，避免使用 CSS 動畫。
• Bug：在 iOS 端鍵盤彈起時會出現(xiàn)組件 bindtap 不生效的問題（部分場景，如：IM 聊天場景中的固定在頁面底部的文本框與發(fā)送按鈕），建議先使用 bindtouchstart 代替 bindtap。