div に入力ボックスの効果を持たせる方法を段階的に説明します。

1. contenteditable または contenteditable="true" を div に追加するだけです (2 つのうちの 1 つを選択します)。

<div contenteditable>这是一个input框</div>
<div contenteditable="true">这也是一个input框</div>

2. 入力スタイルを設定します（個人のニーズに応じて設定します）

    <style>
        div {
            width: 200px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #000;
            padding: 5px;
            margin-top: 10px;
        }
    </style>

3. ブラウザを開いて表示すると、div にテキストを入力できます。

 4. 入力にフォーカスがあるときに外側の境界線を削除する必要がある場合は、次のコードをスタイルに追加できます。

 /* 去掉input聚焦时候的外边框 */
        [contenteditable]:focus {
            outline: none;
        }