アプレットはキーボード オーバーレイ入力ボックスをどのように処理しますか (コードは添付されています)

この記事の内容は、ミニ プログラムがキーボード オーバーレイ入力ボックスを処理する方法に関するものです (コード付き)。必要な方は参考にしていただければ幸いです。

モバイル端末では、入力ボックスがページの下部にある場合、キーボードが入力ボックスを覆います。同様の状況がミニ プログラムでも発生しますが、ミニ プログラムではいくつかの機能が提供されます。ただし、これでは要件を満たせません。

アプレットのデフォルトの動作については、次のとおりです。 API の場合、アプレットは入力ボックスがキーボードの真上に来るまで画面を上に押し上げます。

つまり、処理されない場合、アプレットのキーボードは画面をカバーしません。しかし、私のニーズでは、これでは十分ではありません。ページの一部は継続的に表示する必要があるコンテンツであり、ページを上に押し上げたくないからです。

したがって、解決する必要があります。これらの問題は、ミニ プログラムの API を通じて解決されます。

cursor-spacing

比較的通常の UI デザインでは、実際には入力ボックスの外側にラッパーの層があります。ミニ プログラムのデフォルトの動作が不明であることは明らかなので、結果は次のようになります。このラッパー層の下部 (入力ボックスの下) は切り取られ、非常に醜いものになります。 #この apicursor-spacing を導入し、必要なだけ設定し、入力の下に必要なだけ残しておきます。この数値は「入力ボックスの下端からラッパーの端までの距離」でなければなりません。

このアプレットの落とし穴は、ドキュメント上の単位が間違っていることです。この属性の意味を知るには、実際に試してみる必要があるため、単位が間違っていると、ほとんどの効果が得られません。正しい単位は、

10px

または

100rpx

です。

##adjust- Position先ほど述べたように、ページを押し上げるのではなく、入力ボックスを直接押し上げるようにしたいのです。そこで、この API を試してみました。デフォルトは true です。 false に設定すると、入力ボックスをクリックすると、キーボードが入力ボックスを完全に覆うようになります。

そこで、カーソル間隔を追加したところ、2 つの API を同時に有効にできないことがわかりました。 .したがって、最終的な結論は次のとおりです。提供された API を使用するだけでは要件を満たせないため、イベントをリッスンして自分で実行するしかありません。

解決策

入力ボックスを手動で操作するためのアイデア:

adjust-position は false に設定されます。

入力ボックスのラッパーはローカル データに関連付けられ、絶対位置に設定されます。

1. フォーカス イベントで入力ボックスの位置を変更します。

2. blur イベントで入力ボックスの位置を復元する

3. このアイデアに従って、いくつかの問題が発生しました。

4. 決定方法入力ボックスの位置

バインドフォーカスで見つかりました。試してみると、キーボードの高さはピクセル単位で取得できるので、下の値を設定するだけです。 px の高さ。

入力ボックス ラッパーの相対位置がページの下部にない場合、rpx を単位として使用する場合、画面の幅と高さを取得する必要があります。問題なく、ラッパーがページの下部に相対的に配置されるようにレイアウトを調整できます。

変更後、入力ボックスはスタイルの直後にフォーカスを失います。 ##これが発生した場合、動作は次のようになります。入力ボックスをクリックすると、入力ボックスのラッパーが点滅し、元の位置に戻ります (フォーカスが失われるため)

その後。多くの実験を行った結果、行う必要があるのは、ローカル変数を

focus

属性にバインドすることです。

次に、wx:if を使用して、フォーカスがあるかどうかに基づいて入力ボックスを非表示にします。偽の入力ボックスを配置し、クリックした後、キーボードを呼び出すように focus 属性を変更します。実装コード: https://github.com/cwj0417/step/blob/master/src/pages/did/インデックス.vue

以上がアプレットはキーボード オーバーレイ入力ボックスをどのように処理しますか (コードは添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。