WeChat アプレット入力ボックスの詳細なコード例

この記事では、主に WeChat アプレット入力ボックスの詳細な説明と簡単な例を紹介します。必要な友人は、

実装レンダリングを参照してください:

WeChat アプレット入力ボックス入力

maxlengthauto-focusfocusbindchangebindinput 関数 文字列 を直接 返す ことができます。 bindfocusEventHandlebindblurEventHandleボックスがフォーカスを失っても、 t.detail = {value:value}サンプルコード:

<!--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();
 }
 }
})

属性名前	型	デフォルト値	説明
値	文字列		入力ボックスの内容
型	文字列	text	入力の種類、有効な値: text、number、idcard、数字、time、date
password	Boolean	false	パスワードの種類かどうか
placeholder	String		入力ボックスは空のプレースホルダー
placeholder-style	String		はプレースホルダーのスタイルを指定しますプレースホルダー Style クラス
無効Boolean	false	無効にするかどうか
Number	140	最大入力長、0に設定すると、最大長に制限はありません
Boolean	false	オートフォーカス、キーボードを引き上げます。ページ内には、オートフォーカス属性
Boolean	false	を設定する入力は1つだけあり、入力がフォーカスを取得するように
EventHandle		ボックスがフォーカスを失い、bindchange イベントがトリガーされ、event.detail={value:value}
EventHandle		日付/時刻型以外の入力ボックス、キーボード入力時に、入力イベント、イベントをトリガーします.detail={value:value} の場合、処理	は、入力ボックスの内容を置き換える
			入力ボックスがフォーカスされるとトリガーされ、event.detail = {value:value}
読んでいただきありがとうございます。皆さんのお役に立てれば幸いです。このサイトのご支援に感謝します。

以上がWeChat アプレット入力ボックスの詳細なコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。