javascript - Web微信聊天輸入框解決方案

問題描述

問題解答

<!--input.wxml--><view class='section'><inputplaceholder='這是一個可以自動聚焦的input'auto-focus/></view><view class='section'><inputplaceholder='這個只有在按鈕點擊的時候才聚焦' focus='{{focus}}' /><viewclass='btn-area'><buttonbindtap='bindButtonTap'>使得輸入框獲取焦點</button></view></view><view class='section'><input maxlength='10' placeholder='最大輸入長度10' /></view><view class='section'><viewclass='section__title'>你輸入的是：{{inputValue}}</view><input bindinput='bindKeyInput' placeholder='輸入同步到view中'/></view><view class='section'><input bindinput='bindReplaceInput' placeholder='連續的兩個1會變成2' /></view><view class='section'><input bindinput='bindHideKeyboard' placeholder='輸入123自動收起鍵盤' /></view><view class='section'><inputtype='emoji' placeholder='這是一個帶有表情的輸入框' /></view><view class='section'><inputpassword type='number' /></view><view class='section'><inputpassword type='text' /></view><view class='section'><inputtype='digit' placeholder='帶小數點的數字鍵盤'/></view><view class='section'><inputtype='idcard' placeholder='身份證輸入鍵盤' /></view><view class='section'><inputplaceholder- placeholder='占位符字體是紅色的' /></view>//input.jsPage({data:{focus:false,inputValue:''},bindButtonTap:function(){this.setData({focus:Date.now()})},bindKeyInput:function(e){this.setData({inputValue:e.detail.value})},bindReplaceInput:function(e){varvalue = e.detail.value;var pos= e.detail.cursor;if(pos!= -1){//光標在中間varleft = 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();}}})