溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

微信小程序如何獲取輸入框

發(fā)布時間：2022-03-10 10:20:48 來源：億速云 閱讀：251 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹了微信小程序如何獲取輸入框的相關知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇微信小程序如何獲取輸入框文章都會有所收獲，下面我們一起來看看吧。

input

輸入框。

屬性名 類型 默認值 說明 最低版本
value String   輸入框的初始內(nèi)容  
type String "text" input 的類型  
password Boolean false 是否是密碼類型  
placeholder String   輸入框為空時占位符  
placeholder-style String   指定 placeholder 的樣式  
placeholder-class String "input-placeholder" 指定 placeholder 的樣式類  
disabled Boolean false 是否禁用  
maxlength Number 140 最大輸入長度，設置為 -1 的時候不限制最大長度  
cursor-spacing Number 0 指定光標與鍵盤的距離，單位 px 。取 input 距離底部的距離和 cursor-spacing 指定的距離的最小值作為光標與鍵盤的距離  
auto-focus Boolean false (即將廢棄，請直接使用 focus )自動聚焦，拉起鍵盤  
focus Boolean false 獲取焦點  
confirm-type String "done" 設置鍵盤右下角按鈕的文字 1.1.0
confirm-hold Boolean false 點擊鍵盤右下角按鈕時是否保持鍵盤不收起 1.1.0
bindinput EventHandle   當鍵盤輸入時，觸發(fā)input事件，event.detail = {value: value}，處理函數(shù)可以直接 return 一個字符串，將替換輸入框的內(nèi)容。  
bindfocus EventHandle   輸入框聚焦時觸發(fā)，event.detail = {value: value}  
bindblur EventHandle   輸入框失去焦點時觸發(fā)，event.detail = {value: value}  
bindconfirm EventHandle   點擊完成按鈕時觸發(fā)，event.detail = {value: value}  

type 有效值：

值 說明
text 文本輸入鍵盤
number 數(shù)字輸入鍵盤
idcard 身份證輸入鍵盤
digit 帶小數(shù)點的數(shù)字鍵盤

confirm-type 有效值：

值 說明
send 右下角按鈕為“發(fā)送”
search 右下角按鈕為“搜索”
next 右下角按鈕為“下一個”
go 右下角按鈕為“前往”
done 右下角按鈕為“完成”

示例代碼：

<!--input.wxml--><view class="section"><input placeholder="這是一個可以自動聚焦的input" auto-focus/></view><view class="section"><input placeholder="這個只有在按鈕點擊的時候才聚焦" focus="{{focus}}" /><view class="btn-area"><button bindtap="bindButtonTap">使得輸入框獲取焦點</button></view></view><view class="section"><input  maxlength="10" placeholder="最大輸入長度10" /></view><view class="section"><view class="section__title">你輸入的是：{{inputValue}}</view><input  bindinput="bindKeyInput" placeholder="輸入同步到view中"/></view><view class="section"><input  bindinput="bindReplaceInput" placeholder="連續(xù)的兩個1會變成2" /></view><view class="section"><input password type="number" /></view><view class="section"><input password type="text" /></view><view class="section"><input type="digit" placeholder="帶小數(shù)點的數(shù)字鍵盤"/></view><view class="section"><input type="idcard" placeholder="身份證輸入鍵盤" /></view><view class="section"><input placeholder-style="color:red" placeholder="占位符字體是紅色的" /></view>
//input.jsPage({
  data:{
    focus:false,
    inputValue:""
  },
  bindButtonTap:function(){this.setData({
      focus: true
    })
  },
  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'),
  }
})

Bug & Tip

  1. bug : 微信版本6.3.30, focus 屬性設置無效；

  2. bug : 微信版本6.3.30, placeholder 在聚焦時出現(xiàn)重影問題；

  3. tip : input 組件是一個 native 組件，字體是系統(tǒng)字體，所以無法設置 font-family；

  4. tip : 在 input 聚焦期間，避免使用 css 動畫；

關于“微信小程序如何獲取輸入框”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“微信小程序如何獲取輸入框”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手