WeChat ミニ プログラムのテキストエリアと入力に関する問題の概要

この記事では、WeChat ミニ プログラム に関する関連知識を提供します。主に、ミニ プログラムのテキストエリアと入力の問題の概要を紹介します。これら 2 つのコンポーネントのうち 1 つだけが使用される場合、何もありません。という問題がありますが、二人が一緒に登場すると次々と問題が発生しますので、一緒に見ていきましょう。

[関連する学習の推奨事項: 小さなプログラム学習チュートリアル]

WeChat アプレットには、textarea と input という 2 つのネイティブ コンポーネントがあります。 , これら 2 つのコンポーネントのいずれか 1 つだけを使用する場合は問題ありませんが、これらが一緒に現れると問題が次々と発生します。それらはすべて非常に形而上学的な問題です。開発中にこれらの形而上学に遭遇しました。問題は、単純なフォーム入力ページであるということです。手動ページプッシュ機能を実装するだけなので、完成までに数日かかりました。

レンダリング:

思考

これらの形而上学的問題を特別な方法で解決した後、私はたくさんのことを考えました

• textarea と input を一緒に使用すると、なぜこのような形而上学的な問題が発生するのでしょうか?

• もちろん通常の方法で書いたのですが、なぜ iOS スマートフォンでは動作するのに、Android スマートフォンでは動作しないのでしょうか?

• なぜ可能な場合と不可能な場合があるのでしょうか?

...など

今後これらの問題に寄り道しないように、textarea と input Kill の間の関係を探ることにしました

テスト マシン

この調査で使用したマシンは

Android マシン: Honor 20、Xiaomi 10s;

ios マシン: iPhone13

ここで形而上学的な質問が来ます。

1.bindkeyboardheightchange イベントをバインドする

問題: textarea に bindingkeyboardheightchange イベントをバインドするだけで、入力によって textarea の bindingkeyboardheightchange イベントもトリガーされます。トリガーによって伝達されるパラメーターは、テキストエリアの上にあるすべてのパラメーターです。

モデル: Android が表示される必要があります

例:

#解決策:利用できません 解決策が見つかりました

2.hold-keyboaedをtrueに設定する場合

問題: textareaとinputのhold-keyboaed属性がtrueに設定されている場合、および入力は次のとおりです タイプがテキストではない場合、連続的に切り替えるとキーボード上の補完が妨げられ、テキストエリアがフォーカスされなくなります。

モデル: Android が表示される必要があります

サンプル gif:

解決策: 1. show-confirm-bar を使用してキーボードを上げたときに、テキストエリアの上に完了ボタンを表示しません。2. 入力タイプをテキストに設定します。3. Hold を設定しないでください - keyboaed は true

3. テキストエリアの貫通問題

問題: 固定要素がある場合、z-index 値の数に関係なくが設定されている場合、textarea コンポーネントは固定要素を貫通します

モデル: Android 時々表示されます

形而上学的ポイント: 表示されない場合もありますが、コードを再コンパイルしてプレビューするためにスキャンすると、textarea が表示されます。ペネトレーションの問題が発生し、その後常に表示されますが、携帯電話のミニ プログラムを削除し、コードを再コンパイルしてスキャンすると、問題が発生しない可能性があります。

サンプル gif:

解決策: テキストエリアを覆う固定要素が必要な場合は、テキストエリアを非表示にするか、固定要素が表示されたときにテキストエリアをビュー要素に変えることができます

#4.バインドフォーカスイベントをバインドする

問題: バインドフォーカスイベントのみが textarea にバインドされている場合、ページに入った後、最初に textarea をクリックし、すぐに input をクリックすると、textarea の focus イベントがバインドされます。トリガー

モデル: Android 時々

サンプル gif:

解決策: focus を通じてテキストエリアのフォーカスを動的に制御できます。入力タイプを数値タイプに設定しないようにしてください

5. 遷移アニメーション

問題: キーボードを持ち上げるプロセス中に手動でページを下部から持ち上げたり、translateY したりすると、遷移アニメーション属性を設定すると、テキストエリアのプレースホルダーが点滅します。

モデル: Android が表示される必要があります

サンプル gif:

解決策: モデルを決定し、iOS、Android マシンのトランジション属性を追加します。トランジション属性を追加しないでください

#6. クリックして完了する場合 #問題: textarea は、bindkeyboardheightchange イベントをバインドし、独自の補完を使用します。クリックして完了しても、bindkeyboardheightchange イベントはトリガーされません

モデル: Android 時々

#サンプル gif:

解決策: 解決策が見つかりません

7. 設定

自動高さに関する問題: textarea の auto-height 属性が true の場合、selectComponet を使用して高さを取得するときに問題が発生します。コンテンツのない行の初期の高さである場合もあれば、そうでない場合もあります。テキストエリアの高さ。デフォルトの高さ

モデル: iOS および Android

解決策: 自動高さの値を動的に制御するか、タイマーを使用して高さの取得を遅らせます

8. キーボードの高さの取得が一貫していない

問題:bindkeyboardchange イベントが複数回トリガーされ、イベントから取得されたキーボードの高さが一貫していません。完成した高さを持つ場合もあれば、完全な高さになる場合もあります。 not.

モデル: Android 時々発生します

解決策: 解決策が見つかりません

9. データの精度の取得の問題

問題: selectComponet を通じて要素を取得する 高さ、幅、または位置を設定するとき、デフォルトではすべての小数点以下が保持されます (約 16 桁)。これによりアニメーションで混乱が生じる可能性があります

モデル: iOS および Android 場合によっては

解決策: js 言語自体 精度の問題があるため、selectComponent を通じてデータを取得した後、処理のために小数点以下 2 桁のみを保持することが最善です

[関連する学習の推奨事項:

小プログラム学習チュートリアル

]

以上がWeChat ミニ プログラムのテキストエリアと入力に関する問題の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。