Heim > WeChat-Applet > Mini-Programmentwicklung > Formularkomponente_Detaillierte Erläuterung der Miniprogramm-Formulartabelle mit mehrzeiligen Eingabefeldern

Formularkomponente_Detaillierte Erläuterung der Miniprogramm-Formulartabelle mit mehrzeiligen Eingabefeldern

php是最好的语言
Freigeben: 2018-08-02 09:38:09
Original
2644 Leute haben es durchsucht

Mehrzeiliges Eingabefeld.

属性名 类型 默认值 说明
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}

Beispielcode:

<!--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>
Nach dem Login kopieren
rrree

Fehler & Tipp

  1. bug: WeChat-Version6.3.30, textareaBeim Rendern der Liste wird die Position des neu hinzugefügten textarea beim Autofokus falsch berechnet.

  2.  tip: Das textarea-Ereignis von blur wird später sein als das tap-Ereignis auf der Seite, wenn Sie button vom Klickereignis benötigen von textarea können Sie form von bindsubmit verwenden.

  3. tip: Es wird nicht empfohlen, Benutzereingaben bei mehrzeiligem Text zu ändern, sodass die textarea-Verarbeitungsfunktion von bindinput den Rückgabewert von Nach oben. textarea

  4. : Die Komponente tip ist eine vom Client erstellte native Komponente und hat die höchste Stufe. textarea

  5. : Verwenden Sie die Komponente tip nicht innerhalb von scroll-view. textarea

  6. : Die tip-Animation ist für die css-Komponente nicht gültig. textarea

Verwandte Artikel:

Einführung in die Forminterpretation und Analyse der Komponenten des WeChat-Miniprogramms

WeChat-Miniprogramm Teilen von Formularkomponenten

Zugehöriges Video:

WeChat Mini Program Development Document

Das obige ist der detaillierte Inhalt vonFormularkomponente_Detaillierte Erläuterung der Miniprogramm-Formulartabelle mit mehrzeiligen Eingabefeldern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage