グリッド入力とシフト複数選択_html/css_WEB-ITnose

Gong グリッド入力の入力

プロジェクトを外部に共有する場合、パブリックとプライベートの 2 種類の共有があります。プライベートの場合は、コードを抽出する必要があります。コードを抽出する必要がある場合は、入力ボックスが必要です。通常の入力ボックスは次のようになります:

異常な入力ボックスは次のようになります:

後者の方法は携帯電話で動作します。 Alipay や WeChat 支払いのパスワード入力など。

実装するには 2 つの方法があります。最初に簡単な方法について説明します。

簡単な実装アイデアは、同じサイズの入力ボックスと div を設定し、z-index を設定して入力を div の上に配置し、同時に入力の不透明度を設定することです。ボックスは 0 に近いため、HTML 構造は Jiang Zi に似ているはずです:

<input type="text" value='提取码' maxLength="6" autoComplete="off"/><div id='pwd'>    <span>宫格1</span>    <span>宫格2</span>    <span>宫格3</span>    <span>宫格4</span>    <span>宫格5</span>    <span>宫格6</span>    <span class='custom-cursor'></span></div>

CSS:

input {  position: absolute;  z-index: 10;  top: 0;  left: 50%;  transform: translateX(-50%);  opacity: 0.01;  height: 34px;  width: 232px;  box-sizing: border-box; }#pwd{    position: absolute;    top: 0;    left: 50%;    height: 34px;    width: 232px;    overflow: hidden;    color: #0d9aff;    box-sizing: border-box;    transform: translateX(-50%);  }  .custom-cursor{     position: absolute;     top: 5px;     left: 2px;     width: 1px;     height: 22px;     border: 1px solid black;     animation:mymove .3s infinite; } @keyframes mymove {    0%{        opacity: 0;    }    100%{        opacity: 1;    }}

入力ボックスは非表示であるため、カーソルは次のようにシミュレートされる必要があります。入力プロンプト。入力に基づいてカーソルのオフセット距離が自動的に計算されます。

別の実装方法は、入力に基づいて入力ボックス自体のオフセット距離を計算する必要があるだけでなく、使用されるフォントの幅と高さも計算する必要があります。入力ボックスのは、使用されているフォントに関連しています。一部のオンライン エディタは同様の方法で実装されていますが、代わりに textarea を使用します。

シフト複数選択

シフト複数選択は、ファイル マネージャーやリソース マネージャーで非常に一般的な操作です。OS X と Windows は、さまざまな方法でシフト複数選択を実装します。

シフト複数選択には 2 つの難しい点があると私は考えています。1 つは境界をどのように決定するか、もう 1 つは選択方法をどのように決定するかです。相対的に言えば、後者の方が達成しやすいです。

境界を決定する状況と操作は、以下に示すように比較的複雑です。

私たちのプロジェクトでは、シフトマルチの比較的単純な実装方法を採用しています。したがって、この図は当社独自のビジネス シナリオに基づいており、普遍的なものではありませんが、参考となるアイデアを提供することができます。

友人が北京ツアーのプランをシェアしてくれました。

リンク: https://pan.sankuai.com/plink/m6C1r1Sf1BiE、抽出コード: 4E0BzJ