Home  >  Article  >  WeChat Applet  >  Detailed explanation of WeChat applet components: input input box

Detailed explanation of WeChat applet components: input input box

高洛峰
高洛峰Original
2017-03-27 11:49:264899browse

input input boxComponent description:

This article introduces various input input boxes parameters and characteristics.

input input boxThe sample code runs as follows:

详解微信小程序组件:input输入框

The following is the WXML code:

##

<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=&#39;{{false}}&#39;/>
<input  placeholder="disable={{true}}" disabled=&#39;{{true}}&#39;/>
最大长度:
<input   maxlength="10" placeholder="maxlength=&#39;10&#39;最多长度10字符"/>
<input   maxlength="5" placeholder="maxlength=&#39;5&#39;最多长度5字符"/>
<input   maxlength="-1"  placeholder="值为-1,则不限制长度"/>
</view>

The following is the WXSS code:

.content{
  border:1px black solid;
  margin: 10px;
  font-size: 10pt;
  padding: 5px;
}
input{
  border:1px red solid;
margin: 5px;
}

##Event renderings:

详解微信小程序组件:input输入框

The following is the WXML code:

<view class="content">
bindinput="当内容改变"
<input  bindinput="bindinput"/>
bindfocus:当获取焦点
<input  bindfocus="bindfocus"/>
bindblur:当失去焦点触发
<input  bindblur="bindblur"/>
内容:
<view style="color:blue">
{{log}}
</view>
</view>

The following is the JS code:

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
    })
  }
})

The following is the WXSS code:

.content{
  border:1px black solid;
  margin: 10px;
  font-size: 10pt;
  padding: 5px;
}
input{
  border:1px red solid;
margin: 5px;
}

Component properties:

##Propertiesvaluetype##passwordSpecify the style of placeholderString##placeholder-classSpecify the style class of placeholderWhether it is disabledMaximum input length, When set to -1Auto-focus, pull up the keyboard. When there can only be one input or textarea tag in the page, set the auto-focus attribute Get focus (currently not supported by development tools)

Description

Type

Default value

Initial content of the input box

String


Valid values: text, number, idcard, digit

String

text

is the password type

Boolean

false

##placeholder
Placeholder when the input box is empty

String

##placeholder -style


String

input-placeholder

disabled

Boolean

false

maxlength

, there is no limit to the maximum length

Number

140

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代码:

<!--属性:-->
<!--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="自己定义函数名">

The above is the detailed content of Detailed explanation of WeChat applet components: input input box. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn