Composant de formulaire_Explication détaillée du tableau de la zone de saisie multiligne du mini-programme

php是最好的语言
Libérer: 2018-08-02 09:38:09
original
2625 Les gens l'ont consulté

Zone de saisie multiligne.

属性名 类型 默认值 说明
value String   输入框的内容
placeholder String   输入框为空时占位符
placeholder-style String   指定 placeholder 的样式
placeholder-class String textarea-placeholder 指定 placeholder 的样式类
disabled Boolean false 是否禁用
maxlength Number 140 最大输入长度,设置为 -1 的时候不限制最大长度
auto-focus Boolean false 自动聚焦,拉起键盘。
focus Boolean false 获取焦点
auto-height Boolean false 是否自动增高,设置auto-height时,style.height不生效
fixed Boolean false 如果 textarea 是在一个position:fixed的区域,需要显示指定属性 fixed 为 true
cursor-spacing Number 0 指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
bindfocus EventHandle   输入框聚焦时触发,event.detail = {value: value}
bindblur EventHandle   输入框失去焦点时触发,event.detail = {value: value}
bindlinechange EventHandle   输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput EventHandle   当键盘输入时,触发 input 事件,event.detail = {value: value},bindinput 处理函数的返回值并不会反映到 textarea 上
bindconfirm EventHandle   点击完成时, 触发 confirm 事件,event.detail = {value: value}

Exemple de code :

<!--textarea.wxml-->
<view class="section">
  <textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" />
</view>
<view class="section">
  <textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;"  />
</view>
<view class="section">
  <textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus />
</view>
<view class="section">
  <textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">使得输入框获取焦点</button>
  </view>
</view><view class="section">  <form bindsubmit="bindFormSubmit">    <textarea placeholder="form 中的 textarea" name="textarea"/>    <button form-type="submit"> 提交 </button>  </form></view>
Copier après la connexion
//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)  }
})
Copier après la connexion

Bogue et astuce

  1. bug : WeChat Dans la version 6.3.30, textarea, lors du rendu de la liste, la position du textarea nouvellement ajouté lors de la mise au point automatique est mal calculée.

  2.  tip : L'événement textarea de blur sera postérieur à l'événement tap sur la page si vous avez besoin d'obtenir button à partir de l'événement de clic. de textarea, vous pouvez utiliser form de bindsubmit.

  3. tip : Il n'est pas recommandé de modifier la saisie de l'utilisateur sur un texte multiligne, donc la fonction de traitement textarea de bindinput ne reflétera pas la valeur de retour à textareaEn haut.

  4. tip : Le composant textarea est un composant natif créé par le client, et son niveau est le plus élevé.

  5. tip : N'utilisez pas le composant scroll-view dans textarea.

  6. tip : L'animation css n'est pas valide pour le composant textarea.

Articles connexes :

Introduction à l'interprétation et à l'analyse des composants du mini-programme WeChat

Mini-programme WeChat Partage de composants de formulaire

Vidéo connexe :

Document de développement du mini programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal