快應(yīng)用 input組件

2020-08-08 12:00 更新

概述

提供可交互的界面，接收用戶的輸入，默認(rèn)為單行

子組件

不支持

屬性

支持 通用屬性

名稱(chēng)類(lèi)型默認(rèn)值必填描述
typebutton | checkbox | radio | text | email | date | time | number | password | tel1050+text否支持動(dòng)態(tài)修改 1030+
checked<boolean>false否當(dāng)前組件的 checked 狀態(tài)，可觸發(fā) checked 偽類(lèi)，type 為 checkbox 時(shí)生效
name<string>-否input 組件名稱(chēng)
value<string>-否input 組件的值
placeholder<string>-否提示文本的內(nèi)容，type 為 text|email|date|time 時(shí)生效
maxlength 1010+<number>-否組件可接收用戶輸入字符的最大長(zhǎng)度
enterkeytype 1010+default | send | search | next | go | done |default否設(shè)置軟鍵盤(pán) Enter 按鈕的顯示文本或圖標(biāo)．
autocomplete 1050+on | offon否是否開(kāi)啟自動(dòng)提示功能，當(dāng) type 為 tel 時(shí)生效

樣式

支持 通用樣式

名稱(chēng)類(lèi)型默認(rèn)值必填描述
color<color>rgba(0, 0, 0, 0.87)否文本顏色
font-size<number>37.5px否文本尺寸
placeholder-color<color>rgba(0, 0, 0, 0.38)否提示文本的顏色，type 為 text|email|date|time 時(shí)生效
width<length> | <percentage>-否type 為 button 時(shí)，默認(rèn)值為 128px
height<length> | <percentage>-否type 為 button 時(shí)，默認(rèn)值為 70px
caret-color 1060+<color> | auto | transparentauto否光標(biāo)顏色，默認(rèn)值為auto，與文本顏色一致

事件

支持 通用事件

支持change事件，input組件的值、checked狀態(tài)發(fā)生變化時(shí)觸發(fā)

名稱(chēng) 參數(shù) 描述
change 不同 type 參數(shù)不同，具體見(jiàn)下方 change 事件參數(shù) input 組件的值、狀態(tài)發(fā)生改變時(shí)觸發(fā), type 為 button 時(shí)無(wú) change 事件
enterkeyclick 1010+ {value：valueString}，value 為用戶輸入的值 軟鍵盤(pán) Enter 鍵點(diǎn)擊事件
selectionchange 1030+ - 選中文本改變和光標(biāo)移動(dòng)時(shí)觸發(fā)

change 事件參數(shù)

參數(shù) text | email | date | time | number | password checkbox radio 備注
name √ √
value √ √ √
checked √
text deprecated √ √

方法

名稱(chēng) 參數(shù) 描述
focus {focus:true|false}，focus 不傳默認(rèn)為 true 使組件獲得或者失去焦點(diǎn)，可觸發(fā) focus 偽類(lèi)，type 為 text|email|date|time|number|password 時(shí)，可彈出或收起輸入法
select 1010+ - 選中文本框的全部文本
setSelectionRange 1010+ {start: <number>, end: <number>} 設(shè)置文本框的選中區(qū)域
getSelectionRange 1010+ {callback: Function(start: <number>, end: <number>)} 獲取文本的選中區(qū)域

input   示例代碼

查看 示例代碼


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)