ホームページ WeChat アプレット ミニプログラム開発 アプレットはキーボード オーバーレイ入力ボックスをどのように処理しますか (コードは添付されています)

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

Dec 29, 2018 am 10:54 AM
javascript mpvue アプレット 入力ボックス キーボード

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

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

アプレットのデフォルトの動作については、次のとおりです。 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. 決定方法入力ボックスの位置

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

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

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

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

focus

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

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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

キーボードで下線を入力する方法?入力せずに下線だけを入力する方法? キーボードで下線を入力する方法?入力せずに下線だけを入力する方法? Feb 22, 2024 pm 07:46 PM

入力方法を英語に調整し、Shift キーとマイナス キーを押したままにします。チュートリアルの適用モデル: Lenovo AIO520C システム: Windows 10 Professional エディション: Microsoft Office Word 2022 分析 1 まず、入力方法の中国語と英語の入力を確認し、英語に調整します。 2 次に、キーボードの Shift キーとマイナス キーを同時に押します。 3 インターフェイスをチェックして、下線付きの単語を確認します。補足:Word文書に下線を素早く入力する方法 1. Wordで下線を入力する必要がある場合は、マウスでスペースを選択し、フォントメニューで入力する下線の種類を選択します。概要/注意事項: 続行する前に必ず入力方法を英語に変更してください。そうしないと、アンダースコアを正常に入力できません。

ショートカットキーで右クリックメニューを開く方法 ショートカットキーで右クリックメニューを開く方法 Jan 14, 2024 pm 03:12 PM

マウスが一時的に機能しなくなった場合、キーボード ショートカットを使用して右クリック メニューを開くにはどうすればよいですか? 2 つの方法があります。1 つは Shift+F10 ショートカット キーを押して右クリック メニューを調整する方法です。 Windows と Ctrl の間のキーボード ショートカット。ディレクトリ キーも使用できます。以下の具体的なチュートリアルを見てみましょう。キーボード ショートカットを使用して右クリック メニューを開く 1 つ目の方法: 1. コンピューターのデスクトップでファイルが選択されていないときに、下の図のキーボードの赤丸でマークされたボタンを押します。右クリックメニュー。 2. デスクトップ上で右クリック メニューを開くことができます。項目を選択する必要がある場合は、マウスを使用して選択します。2 番目の方法 1. 実際には、「Shift+F10」ショートカット キーを使用して調整できます。右クリックメニュー2

Windows ラップトップでのキーボードの自動入力 Windows ラップトップでのキーボードの自動入力 Feb 19, 2024 pm 05:33 PM

キーボードやマウスなどのコンピュータ入力デバイスは人間の操作が必要であり、単独で動作することはできません。 Windows ラップトップのタッチパッドとキーボードにも同じことが当てはまります。テキストは自動的に入力されず、マウスも自動的にクリックされません。何か異常なことが起こったら、必ず理由があるはずです。ノートパソコンのキーボードの自動入力の問題が発生した場合は、ガイドに従って問題を解決してください。 Windows ラップトップのキーボードが自動的に入力される Windows ラップトップのキーボードが自動的に入力される場合、それを修正する方法は次のとおりです。キーボードを手動で確認します キーボードが適切に動作していることを確認します ラップトップがリモートに接続されているかどうかを確認します 自動入力プログラムが実行されているかどうかを確認します マルウェア スキャンを実行します キーボード設定を調整します キーボード ドライバーを再インストールします 詳しく知りましょう

Windows 11 のキーボードに Copilot ボタンを割り当てる方法 Windows 11 のキーボードに Copilot ボタンを割り当てる方法 Feb 20, 2024 am 10:33 AM

今後数か月以内に発売される Windows 11 コンピューターのキーボードには、新しい Copilot キーが搭載される予定です。このキーを使用すると、ユーザーは新しい PC をアップグレードすることなく、指定されたボタンを押すだけで簡単に副操縦士モードに入ることができます。このガイドでは、Windows 11 キーボードの副操縦士ボタンを設定する方法について詳しく説明します。 Microsoft は最近、人工知能による運転支援の進歩において重要な進歩を遂げたと発表しました。 Windows 11 では、PC ユーザーのエクスペリエンスをさらに向上させるために専用の Copilot キーが追加されます。このハードウェアの変更は、Windows PC キーボードに対する 30 年間で初めてのメジャー アップグレードとなります。今後数か月以内に、新しい Windows 11 コンピュータのキーボードには新しい Copilot キー デザインが搭載される予定です

VGN との提携ブランド「Elden's Circle」キーボードおよびマウス シリーズ製品が店頭に並びました: Lani / Faded One カスタム テーマ、99 元から VGN との提携ブランド「Elden's Circle」キーボードおよびマウス シリーズ製品が店頭に並びました: Lani / Faded One カスタム テーマ、99 元から Aug 12, 2024 pm 10:45 PM

8月12日のこのサイトのニュースによると、VGNは8月6日に、Lani/Faded Oneのカスタマイズされたテーマでデザインされたキーボード、マウス、マウスパッドを含む共同ブランドの「Elden Ring」キーボードおよびマウスシリーズを発売しました。の製品はJD.comに掲載されており、価格は99元からです。このサイトに添付されている共同ブランドの新製品情報は次のとおりです。 VGN丨Elden Law Ring S99PRO キーボード このキーボードは、純粋なアルミニウム合金シェルを使用し、5 層サイレンサー構造によって補完され、GASKET 板バネ構造を使用し、単一の- キースロット付き PCB、独自の高さの PBT 素材キーキャップ、アルミニウム合金のパーソナライズされたバックプレーン、VHUB に接続された 3 つのモード接続と SMARTSPEEDX 低遅延テクノロジーをサポートし、549 元から複数のデバイスをワンストップで管理できます。 VGN丨Elden French Ring F1PROMAX ワイヤレスマウス マウス

WeChat キーボードのスキンを設定する方法 WeChat キーボードのスキンを設定する方法 WeChat キーボードのスキンを設定する方法 WeChat キーボードのスキンを設定する方法 Mar 13, 2024 am 09:04 AM

WeChatキーボードのスキンを設定するにはどうすればよいですか? WeChat キーボードは、非常にスマートな携帯電話入力方法ソフトウェアです。このソフトウェアには多くのユーザーフレンドリーな機能があり、ユーザーは自分の入力モードを選択し、このソフトウェア上で必要な表現をできるだけ早く見つけることができます。このソフトウェアでは、ユーザー自身でキーボードのスキンを変更することもできますが、スキンの変更方法がわからないユーザーも多いため、以下のエディターにスキンの変更方法をまとめましたので、参考にしてください。 WeChat キーボード スキンの設定方法 WeChat、SMS、または携帯電話のキーボードを使用する必要があるその他のアプリケーションでは、キーボードの左上隅にある入力方法設定アイコンをクリックして設定ページに入り、機能を表示できます。さまざまな入力方法のオプションを設定します。 2.入力方法の設定ページで「パーソナライズドスキン」をクリックします。

Maicong K87 3モードメカニカルキーボードに「ヒヤシンス軸」と「アイスクリーム軸」バージョンが追加:ガスケット構造、初期価格は299元から Maicong K87 3モードメカニカルキーボードに「ヒヤシンス軸」と「アイスクリーム軸」バージョンが追加:ガスケット構造、初期価格は299元から Feb 29, 2024 pm 05:00 PM

2月29日の本ウェブサイトのニュースによると、Maicongは本日、K87 3モードメカニカルキーボード用に「ガスケット構造、80%配置」、関連シャフトを備えた「ヒヤシンススイッチ」と「グレーズドアイスクリームスイッチ」の2つのバージョンを発売したと発表した。キーボードの価格情報は次のとおりです: 「Hyacinth Switch」バー​​ジョン: 初期価格は 299 元 「Liuguang Ice Cream Switch」バー​​ジョン: 初期価格は 379 元 報告によると、このシリーズのキーボードはガスケット構造を使用しており、87 キー 80 %配列、フルキーロールオーバー、およびサーマルサポート プラグの抜き差しには、「オリジナル/MDA 2色PBTキーキャップ」を使用すると主張し、1.2mmのシングルキースロット付きPCB(下部ランプ位置)を使用し、RGBを装備照明効果があり、磁気吸収ネームプレートデザインを採用しています。なお、このキーボードは6000mAhのバッテリーを搭載しており、ワイヤレス遅延は3msですが、キーボードの正式なサイズやサイズは発表されていません。

Apple 携帯電話のキーボードで手書き入力方法を設定する方法 Apple 携帯電話のキーボードで手書き入力方法を設定する方法 Mar 08, 2024 pm 02:30 PM

Apple モバイル キーボード ユーザーは、手書き入力方法を設定したいと考えていますが、その方法がわかりません。実際には非常に簡単です。ユーザーは、携帯電話のキーボード設定で手書き入力方法を直接選択できます。そうでない場合は、手動で追加することもできます手書き入力方式です。 Apple 携帯電話のキーボードで手書き入力方法を設定する方法 A: キーボード設定で直接手書き入力方法を有効にする 1. Apple ユーザーが入力方法を使用する場合、手書き入力方法はデフォルトで有効になります。 2. ユーザーは、入力中に左下隅をクリックして押し続けるだけで手書き入力方法を選択できます。 3. ユーザーが携帯電話に手書き入力メソッドを持っていない場合は、手動で追加することもできます。 4. ユーザーは設定を入力し、ユニバーサル キーボード設定を見つけて、最初のキーボードに手書き入力オプションを追加します。 5. 手書き入力方法を使用して、

See all articles