フォームコンポーネント_ミニプログラムフォームの複数行入力ボックステーブルの詳細説明

複数行の入力ボックス。

属性名	タイプ	デフォルト値	手順
価値	文字列		入力ボックスの内容
プレースホルダー	文字列		入力ボックスが空の場合のプレースホルダー
プレースホルダースタイル	文字列		プレースホルダーのスタイルを指定します
プレースホルダークラス	文字列	テキストエリアプレースホルダー	プレースホルダーのスタイルクラスを指定する
無効化	ブール値	誤り	無効にするかどうか
最大長	番号	140	最大入力長。-1 に設定すると、最大長に制限はありません
オートフォーカス	ブール値	誤り	オートフォーカス、キーボードを引き上げます。
集中	ブール値	誤り	集中力を高める
自動高さ	ブール値	誤り	自動高さを設定する場合、style.height は有効になりません
修正されました	ブール値	誤り	テキストエリアがposition:fixedエリアにある場合、指定された属性fixをtrueとして表示する必要があります
カーソル間隔	番号	0	カーソルとキーボードの間の距離をピクセル単位で指定します。テキストエリアと下部の間の距離と、cursor-spacingで指定された距離の最小値を、カーソルとキーボードの間の距離として取得します
バインドフォーカス	イベントハンドル		入力ボックスがフォーカスされているときにトリガーされます。event.detail = {value: value}
バインドブラー	イベントハンドル		入力ボックスがフォーカスを失ったときにトリガーされます。event.detail = {value: value}
バインドライン変更	イベントハンドル		入力ボックスの行数が変更されたときに呼び出されます。event.detail = {height: 0, heightRpx: 0, lineCount: 0}
バインド入力	イベントハンドル		キーボード入力が発生すると、inputイベントがトリガーされ、event.detail = {value:value}、bininput処理関数の戻り値はテキストエリアには反映されません
バインドコンファーム	イベントハンドル		クリックが完了すると、confirm イベントがトリガーされます。event.detail = {value: value}

サンプルコード:

<!--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>

//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)  }
})

バグとヒント

1. バグ: WeChatバージョン6.3.30、textareaはリストをレンダリングするとき、オートフォーカス中に新しく追加された textarea の位置が正しく計算されません。 bug: 微信版本6.3.30，textarea在列表渲染时，新增加的textarea在自动聚焦时的位置计算错误。

2.  tip:textarea 的blur事件会晚于页面上的tap事件，如果需要在button的点击事件获取textarea，可以使用form的bindsubmit。

3. tip: 不建议在多行文本上对用户的输入进行修改，所以textarea的bindinput处理函数并不会将返回值反映到textarea上。

4. tip:textarea组件是由客户端创建的原生组件，它的层级是最高的。

5. tip: 请勿在scroll-view中使用textarea组件。

6. tip:css动画对textarea

ヒント:textarea の blur イベントは、ページ上の tap イベントよりも遅くなります。必要に応じて、button のクリック イベントで textarea を取得し、form の bindsubmit を使用できます。

ヒント: 複数行のテキストに対するユーザー入力を変更することはお勧めできません。そのため、textarea の bindinput 処理関数は、戻り値をtextareaに反映します。

tip:textarea コンポーネントはクライアントによって作成されたネイティブ コンポーネントであり、そのレベルは最も高いです。

ヒント: scroll-view では textarea コンポーネントを使用しないでください。

ヒント:css アニメーションは textarea コンポーネントでは無効です。 🎜🎜🎜🎜関連記事: 🎜🎜🎜WeChat ミニ プログラム コンポーネント フォームの解釈と分析の紹介🎜🎜🎜🎜WeChat ミニ プログラム コンポーネントの共有 1 つ🎜🎜🎜関連動画: 🎜🎜🎜WeChat ミニ プログラム開発ドキュメント🎜🎜

以上がフォームコンポーネント_ミニプログラムフォームの複数行入力ボックステーブルの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。