Detailed explanation of WeChat applet components: input input box

input input boxComponent description:

This article introduces various input input boxes parameters and characteristics.

input input boxThe sample code runs as follows:

The following is the WXML code:

##

<view>
type：有效值：text 感觉没什么区别
<input>
<input>
<input>
<input>
password：
<input>
<input>
placeholder：
<input>
disable:
<input>
<input>
最大长度：
<input>
<input>
<input>
</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:

The following is the WXML code:

<view>
bindinput="当内容改变"
<input>
bindfocus:当获取焦点
<input>
bindblur：当失去焦点触发
<input>
内容：
<view>
{{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>
<!--type：有效类型text，number,idcard,digit，小编感觉其他三个和text没有明显区别,不清楚是什么问题，正常number应该只允许输入数字，但结果和text一样-->
<input>
<input>
<input>
<input>
<!--password：密码格式 boolean需要{{}}表示-->
<input>
<input>  等同于  <input>
<!--placeholder：占位符，对输入框内容提示-->
<input>
<!--disabled：控制标签有效,或者失效状态，在失效状态，不能获取该值-->
<input>
<input> 等同于 <input>
<!--maxlength:内容长度限制,默认140-->
<input>
<input> 等同于 <input>
<!--focus:初始化时，获取输入焦点(目前开发工具暂不支持)-->
<input>
<input> 等同于 <input>
<!--auto-focus：当界面只有一个input,自动获取焦点-->
<input>
<input> 等同于 <input>
<!--事件：-->
<!--bindinput:当内容改动时触发-->
<input>
<!--bindfocus:当获取焦点，可用输入状态时触发-->
<input>
<!--bindblur：当失去焦点触发-->
<input>

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!