WeChat applet input box detailed example code

This article mainly introduces the detailed explanation and simple examples of the input box of the WeChat applet. Friends in need can refer to the

implementation renderings:

WeChat applet input box input

##placeholder-Stringinput-placeholderSpecify the style class of placeholderdisabledBooleanfalseWhether to disablemaxlengthNumber140Maximum input length , when set to 0, there is no limit to the maximum length auto-focusBooleanfalseAuto focus, pull up keyboard. There can only be one input in the page that sets the auto-focus attributefocusBooleanfalseso that the input gets focusbindchangeEventHandleWhen the input box loses focus, the bindchange event is triggered, event.detail={value:value} bindinputEventHandleInput boxes other than date/time types trigger input events when keyboard input is made , event.detail={value:value}, the processing bindfocusEventHandleTriggered when the input box is focused, event.detail = {value:value}bindblurEventHandleTriggered when the input box loses focus, event.detail = {value:value}

AttributeName	Type	Default value	Description
value	String		Input The content of the box
type	String	text	Type of input, valid values: text, number, idcard, digit ,time,date
password	Boolean	false	Whether Is the password type
placeholder	String		Placeholder when the input box is empty
placeholder-style	String		Specify the style of placeholder
class
			function can directly return a string , which will replace the content of the input box.

Sample code:

<!--input.wxml-->
<view>
 <input>
</view>
<view>
 <input>
 <view>
 <button>使得输入框获取焦点</button>
 </view>
</view>
<view>
 <input>
</view>
<view>
 <view>你输入的是：{{inputValue}}</view>
 <input>
</view>
<view>
 <input>
</view>
<view>
 <input>
</view>
<view>
 <input>
</view>
<view>
 <input>
</view>
<view>
 <input>
</view>
<view>
 <input>
</view>
<view>
 <input>
</view>
<view>
 <input>
</view>

//input.js
Page({
 data:{
 focus:false,
 inputValue:""
 },
 bindButtonTap:function(){
 this.setData({
 focus:Date.now()
 })
 },
 bindKeyInput:function(e){
 this.setData({
 inputValue:e.detail.value
 })
 },
 bindReplaceInput:function(e){
 var value = e.detail.value;
 var pos = e.detail.cursor;
 if(pos != -1){
 //光标在中间
 var left = e.detail.value.slice(0,pos);
 //计算光标的位置
 pos = left.replace(/11/g,'2').length;
 }

 //直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
 return {
 value:value.replace(/11/g,'2'),
 cursor:pos
 }

 //或者直接返回字符串,光标在最后边
 //return value.replace(/11/g,'2'),
 },
 bindHideKeyboard:function(e){
 if(e.detail.value === "123"){
 //收起键盘
 wx.hideKeyboard();
 }
 }
})

Thank you for reading, I hope it can help everyone, thank you for your support of this site!

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