input輸入框組件說明:
本文介紹input 輸入框的各種參數及特性。
input輸入框
示例代碼運行效果如下：
下面是WXML代碼：
[XML]
純文本查看 復制代碼
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<
view
class
=
"content"
>
type：有效值：text 感覺沒什么區別
<
input
placeholder
=
"type=text"
type
=
"text"
value
=
""
/>
<
input
placeholder
=
"type=number"
type
=
"number"
value
=
""
/>
<
input
placeholder
=
"type=idcard"
type
=
"idcard"
value
=
""
/>
<
input
placeholder
=
"type=digit"
type
=
"digit"
value
=
""
/>
password：
<
input
type
=
"text"
password
=
"{{false}}"
placeholder
=
"請輸入密碼"
/>
<
input
type
=
"text"
password
=
"{{true}}"
placeholder
=
"請輸入密碼"
/>
placeholder：
<
input
placeholder
=
"占位符"
/>
disable:
<
input
placeholder
=
"disable={{false}}"
disabled
=
'{{false}}'
/>
<
input
placeholder
=
"disable={{true}}"
disabled
=
'{{true}}'
/>
最大長度：
<
input
maxlength
=
"10"
placeholder
=
"maxlength='10'最多長度10字符"
/>
<
input
maxlength
=
"5"
placeholder
=
"maxlength='5'最多長度5字符"
/>
<
input
maxlength
=
"-1"
placeholder
=
"值為-1，則不限制長度"
/>
</
view
>
|
下面是WXSS代碼：
[JavaScript]
純文本查看 復制代碼
|
01
02
03
04
05
06
07
08
09
10
|
.content{
border:1px black solid;
margin: 10px;
font-size: 10pt;
padding: 5px;
}
input{
border:1px red solid;
margin: 5px;
}
|
事件效果圖：
下面是WXML代碼：
[XML]
純文本查看 復制代碼
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<
view
class
=
"content"
>
bindinput="當內容改變"
<
input
bindinput
=
"bindinput"
/>
bindfocus:當獲取焦點
<
input
bindfocus
=
"bindfocus"
/>
bindblur：當失去焦點觸發
<
input
bindblur
=
"bindblur"
/>
內容：
<
view
style
=
"color:blue"
>
{{log}}
</
view
>
</
view
>
|
下面是JS代碼：
[JavaScript]
純文本查看 復制代碼
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
Page({
data:{
log:
'事件觸發'
},
bindblur:
function
(e){
var
value=e.detail.value;
this
.setData({
log:
"bindblur失去焦點.輸入框值="
+value
})
},
bindinput:
function
(e){
var
value=e.detail.value;
this
.setData({
log:
"bindinput內容改變.輸入框值="
+value
})
},
bindfocus:
function
(e){
var
value=e.detail.value;
this
.setData({
log:
"bindfocus獲取焦點.輸入框值="
+value
})
}
})
|
下面是WXSS代碼：
[JavaScript]
純文本查看 復制代碼
|
01
02
03
04
05
06
07
08
09
10
|
.content{
border:1px black solid;
margin: 10px;
font-size: 10pt;
padding: 5px;
}
input{
border:1px red solid;
margin: 5px;
}
|
組件屬性：
|
屬性
|
描述
|
類型
|
默認值
|
|
value
|
輸入框的初始內容
|
String
|
|
|
type
|
有效值：text, number, idcard, digit
|
String
|
text
|
|
password
|
是否是密碼類型
|
Boolean
|
false
|
|
placeholder
|
輸入框為空時占位符
|
String
|
|
|
placeholder-style
|
指定 placeholder 的樣式
|
String
|
|
|
placeholder-class
|
指定 placeholder 的樣式類
|
String
|
input-placeholder
|
|
disabled
|
是否禁用
|
Boolean
|
false
|
|
maxlength
|
最大輸入長度， 設置為
-1 的時候不限制最大長度
|
Number
|
140
|
|
auto-focus
|
自動聚焦，拉起鍵盤。頁面中只能有一個 input 或 textarea標簽時， 設置 auto-focus 屬性
|
Boolean
|
false
|
|
focus
|
獲取焦點（當前開發工具暫不支持）
|
Boolean
|
false
|
|
bindinput
|
除了date/time類型外的輸入框，當鍵盤輸入時，觸發input事件，處理函數可以直接 return 一個字符串，將替換輸入框的內容。
|
EventHandle
|
|
|
bindfocus
|
輸入框聚焦時觸發event.detail = {value: value}
|
EventHandle
|
|
|
bindblur
|
輸入框失去焦點時觸發event.detail = {value: value}
|
EventHandle
|
屬性解析：
下面是WXML代碼：
[XML]
純文本查看 復制代碼
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!--屬性：-->
<!--value：輸入框內容-->
<
input
value
=
"內容"
/>
<!--type：有效類型text，number,idcard,digit，小編感覺其他三個和text沒有明顯區別,不清楚是什么問題，正常number應該只允許輸入數字，但結果和text一樣-->
<
input
type
=
"text"
/>
<
input
type
=
"number"
/>
<
input
type
=
"idcard"
/>
<
input
type
=
"digit"
/>
<!--password：密碼格式 boolean需要{{}}表示-->
<
input
password
=
"{{true}}"
/>
<
input
password/> 等同於 <
input
password
=
"{{false}}"
/>
<!--placeholder：占位符，對輸入框內容提示-->
<
input
placeholder
=
"占位符"
placeholder-class
=
"占位符靜態樣式"
placeholder-style
=
"占位符動態樣式，可用{{}}進行動態賦值"
/>
<!--disabled：控制標簽有效,或者失效狀態，在失效狀態，不能獲取該值-->
<
input
disabled
=
"{{true}}"
/>
<
input
disabled/> 等同於 <
input
disabled
=
"{{false}}"
/>
<!--maxlength:內容長度限制,默認140-->
<
input
maxlength
=
"100"
/>
<
input
maxlength/> 等同於 <
input
maxlength
=
"140"
/>
<!--focus:初始化時，獲取輸入焦點(目前開發工具暫不支持)-->
<
input
focus
=
"{{true}}"
/>
<
input
focus/> 等同於 <
input
focus
=
"{{false}}"
/>
<!--auto-focus：當界面只有一個input,自動獲取焦點-->
<
input
auto-focus
=
"{{true}}"
/>
<
input
auto-focus/> 等同於 <
input
auto-focus
=
"{{false}}"
/>
<!--事件：-->
<!--bindinput:當內容改動時觸發-->
<
input
bindinput
=
"自己定義函數名"
>
<!--bindfocus:當獲取焦點，可用輸入狀態時觸發-->
<
input
bindfocus
=
"自己定義函數名"
>
<!--bindblur：當失去焦點觸發-->
<
input
bindblur
=
"自己定義函數名"
>
|