小程序表單多行輸入框表格的示例分析-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)小程序表單多行輸入框表格的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)憑借在網(wǎng)站建設(shè)、網(wǎng)站推廣領(lǐng)域領(lǐng)先的技術(shù)能力和多年的行業(yè)經(jīng)驗(yàn)，為客戶(hù)提供超值的營(yíng)銷(xiāo)型網(wǎng)站建設(shè)服務(wù)，我們始終認(rèn)為：好的營(yíng)銷(xiāo)型網(wǎng)站就是好的業(yè)務(wù)員。我們已成功為企業(yè)單位、個(gè)人等客戶(hù)提供了成都網(wǎng)站建設(shè)、做網(wǎng)站服務(wù)，以良好的商業(yè)信譽(yù)，完善的服務(wù)及深厚的技術(shù)力量處于同行領(lǐng)先地位。

多行輸入框。

屬性名類(lèi)型默認(rèn)值說(shuō)明
valueString
輸入框的內(nèi)容
placeholderString
輸入框?yàn)榭諘r(shí)占位符
placeholder-styleString
指定 placeholder 的樣式
placeholder-classStringtextarea-placeholder指定 placeholder 的樣式類(lèi)
disabledBooleanfalse是否禁用
maxlengthNumber140較大輸入長(zhǎng)度，設(shè)置為 -1 的時(shí)候不限制較大長(zhǎng)度
auto-focusBooleanfalse自動(dòng)聚焦，拉起鍵盤(pán)。
focusBooleanfalse獲取焦點(diǎn)
auto-heightBooleanfalse是否自動(dòng)增高，設(shè)置auto-height時(shí)，style.height不生效
fixedBooleanfalse如果 textarea 是在一個(gè)position:fixed的區(qū)域，需要顯示指定屬性 fixed 為 true
cursor-spacingNumber0指定光標(biāo)與鍵盤(pán)的距離，單位 px 。取 textarea 距離底部的距離和 cursor-spacing 指定的距離的最小值作為光標(biāo)與鍵盤(pán)的距離
bindfocusEventHandle
輸入框聚焦時(shí)觸發(fā)，event.detail = {value: value}
bindblurEventHandle
輸入框失去焦點(diǎn)時(shí)觸發(fā)，event.detail = {value: value}
bindlinechangeEventHandle
輸入框行數(shù)變化時(shí)調(diào)用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinputEventHandle
當(dāng)鍵盤(pán)輸入時(shí)，觸發(fā) input 事件，event.detail = {value: value}，bindinput 處理函數(shù)的返回值并不會(huì)反映到 textarea 上
bindconfirmEventHandle
點(diǎn)擊完成時(shí)， 觸發(fā) confirm 事件，event.detail = {value: value}

示例代碼：

<!--textarea.wxml-->
<view class="section">
  <textarea bindblur="bindTextAreaBlur" auto-height placeholder="自動(dòng)變高" />
</view>
<view class="section">
  <textarea placeholder="placeholder顏色是紅色的" placeholder-style="color:red;"  />
</view>
<view class="section">
  <textarea placeholder="這是一個(gè)可以自動(dòng)聚焦的textarea" auto-focus />
</view>
<view class="section">
  <textarea placeholder="這個(gè)只有在按鈕點(diǎn)擊的時(shí)候才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">使得輸入框獲取焦點(diǎn)</button>
  </view>
</view><view class="section">  <form bindsubmit="bindFormSubmit">    <textarea placeholder="form 中的 textarea" name="textarea"/>    <button form-type="submit"> 提交 </button>  </form></view>
//textarea.js
Page({
  data: {
    height: 20,
    focus: false
  },
  bindButtonTap: function() {
    this.setData({
      focus: true
    })
  },
  bindTextAreaBlur: function(e) {
    console.log(e.detail.value)
  },  bindFormSubmit: function(e) {    console.log(e.detail.value.textarea)  }
})

Bug & Tip

  1. bug: 微信版本6.3.30，textarea在列表渲染時(shí)，新增加的textarea在自動(dòng)聚焦時(shí)的位置計(jì)算錯(cuò)誤。

  2. tip:textarea 的blur事件會(huì)晚于頁(yè)面上的tap事件，如果需要在button的點(diǎn)擊事件獲取textarea，可以使用form的bindsubmit。

  3. tip: 不建議在多行文本上對(duì)用戶(hù)的輸入進(jìn)行修改，所以textarea的bindinput處理函數(shù)并不會(huì)將返回值反映到textarea上。

  4. tip:textarea組件是由客戶(hù)端創(chuàng)建的原生組件，它的層級(jí)是高的。

  5. tip: 請(qǐng)勿在scroll-view中使用textarea組件。

  6. tip:css動(dòng)畫(huà)對(duì)textarea組件無(wú)效。

感謝各位的閱讀！關(guān)于“小程序表單多行輸入框表格的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

當(dāng)前標(biāo)題：小程序表單多行輸入框表格的示例分析-創(chuàng)新互聯(lián)
標(biāo)題URL：http://www.muchs.cn/article36/djhhpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、全網(wǎng)營(yíng)銷(xiāo)推廣、品牌網(wǎng)站設(shè)計(jì)、商城網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)