微信小程序input輸入框的大小-tft每日頭條

在微信小程序開發中，input 用來實現文本輸入，是單行的，textarea是多行的輸入實現

1 基本使用

<textarea class="input" name="remark" placeholder="請輸入備注" auto-focus="true" />

基本效果就是顯示了一個多行的文本輸入框。

placeholder 輸入框為空時的占位符
auto-focus 自動聚集，拉起鍵盤，需要注意的是一個頁面中隻能有一個 input 标簽或者 textarea 來設置這個屬性

微信小程序input輸入框的大小（微信小程序文本輸入）1

我在這裡為明顯效果所以設置了個邊框樣式

.input{ /* 邊框 */ border:1px solid red; padding: 10rpx; }

2 獲取輸入框中的内容

bindinput 屬性用來綁定鍵盤輸入時的事件監聽，也就是可以實時獲取輸入中的内容。

當然在你的處理函數中可以直接 return 一個結果來替換輸入框中的内容。

<textarea class="input" name="remark" placeholder="請輸入備注" bindinput="remarkInputAction" />

對應的 js

/** * 輸入框實時回調 * @param {*} options */ remarkInputAction: function (options) { //獲取輸入框輸入的内容 let value = options.detail.value; console.log("輸入框輸入的内容是 " value) },

效果

微信小程序input輸入框的大小（微信小程序文本輸入）2

3 輸入框焦點監聽

應用場景還是比較多的，比如輸入結束時去校驗個數據什麼的

bindfocus 輸入框獲取到輸入焦點時
bindblur 輸入框焦點移出
bindconfirm 點擊鍵盤的回車鍵或者是完成按鈕時回調的事件

<textarea class="input" name="remark" placeholder="請輸入備注" bindfocus="remarkFocusAction" bindblur="remarkBlurAction" bindconfirm="remarkConfirm" />

對應的 js

remarkFocusAction: function (options) { //輸入框焦點獲取 let value = options.detail.value; console.log("輸入框焦點獲取 " value) }, remarkBlurAction: function (options) { //輸入框焦點移出 let value = options.detail.value; console.log("輸入框焦點移出 " value) }, remarkConfirm: function (options) { //點擊了鍵盤上的完成按鈕 let value = options.detail.value; console.log("點擊了鍵盤上的完成按鈕 " value) },

效果圖

微信小程序input輸入框的大小（微信小程序文本輸入）3

4 auto-height 自動增高與獲取行數

auto-height 默認為false, 為true時，自動增高，默認顯示一行，為true時 style.height設置不生效
bindlinechange 換行時會觸發

<textarea auto-height="true" bindlinechange="remarkLineAction" />

remarkLineAction: function (options) { //行數 let lineCount = options.detail.lineCount; let height = options.detail.height; let heightRpx = options.detail.heightRpx; console.log("輸入框行數變化 " lineCount) },

微信小程序input輸入框的大小（微信小程序文本輸入）4

5 maxlength 限制輸入的文本長度，默認是 140字符，配置為 -1 時代表無限制

<textarea maxlength="1" />

6 使用實例

微信小程序input輸入框的大小（微信小程序文本輸入）5

<view class="inputshow"> <textarea maxlength='500' placeholder-style="color:#5F5F5F;" bindinput='limitWord' value="{{content}}" placeholder='請輸入備注（最多500個字）'></textarea> <view class="clear"> <text style="float: right">{{currentWord}}/{{maxWord}}(最多可輸入500字)</text> </view> </view>

Page({ /** * 頁面的初始數據 */ data: { //字數限制 maxWord: 500, currentWord: 0 }, limitWord:function(e){ var that = this; var value = e.detail.value; //解析字符串長度轉換成整數。 var wordLength = parseInt(value.length); if (that.data.maxWord < wordLength) { return ; } that.setData({ currentWord: wordLength }); }, );

.inputshow{ padding: 10px; background-color: white; border:1px solid red; padding: 10rpx; }

完畢