多个input组成的记事本，当前行input文本溢出时自动聚焦到下一行input，回车自动切换下一行

原创

已于 2024-02-18 16:59:25 修改 · 1.2k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2024-02-18 16:54:12 首次发布

多个input组成的记事本，当前行input文本溢出时自动聚焦到下一行input，回车自动切换下一行

需求场景

需求场景

需求是开发一个类似于笔记本的页面，在每一行都可以输入，点击回车自动切换下一行，并能点击打印（如下图）

话不多说先上效果图

在这里插入图片描述
开发前的构思：用一个大的textarea包裹一个table是不可能的实现的，不知道是否有相关的插件，我这个项目是原生的js所以我放弃了，决定用多个input，有多少行就写多少个input,代码如下

<div class="bodyDiv PageNext" id="addPage"  style="padding-left: 10px;margin-top: 10px;">
    <div style="width:100%; height: 10px;"></div>

    <div style="width:100%; height:20%; margin:auto; ">
        <img src="/https/blog.csdn.net/img/logo.bmp" style="height: 70px; position:absolute; ">  <!-- padding-left: 30vw-->
        <div style="font-size: xx-large; text-align:center; font-family: 宋体,serif; letter-spacing:25px;  ">
            <p style="line-height:0.4">阜阳民生医院</p>
            <p style="line-height:0.4">门诊病历</p>
        </div>
    </div>

    <div style="width:100%; height: 10px;"></div>

    <div style="width:100%;">
        <table style="width:100%">
            <tr>
                <td class="tdInfoKey">姓名: </td>
                <td class="tdInfoValue" th:text="${record?.hzxm}">XXX</td>
                <td class="tdInfoKey">性别: </td>
                <td class="tdInfoValue" th:text="${record?.sex}">XXX</td>
                <td class="tdInfoKey">年龄: </td>
                <td class="tdInfoValue" th:text="${record?.birth}">XXX</td>
            </tr>
            <tr>
                <td class="tdInfoKey">日期: </td>
                <td class="tdInfoValue"><div contenteditable="true" th:text="${record?.czrq}" title="日期的更改不会保存"></div></td>
                <td class="tdInfoKey">病历号: </td>
                <td class="tdInfoValue" th:text="${record?.blh}">XXX</td>
                <td class="tdInfoKey">科室: </td>
                <td class="tdInfoValue" th:text="${record?.ksmc}">XXX</td>
            </tr>
        </table>
    </div>

    <div style="width:100%; height: 10px;"></div>
    <hr style="margin: 4px 0;width: 92%">
    <div style="width:100%; height:auto;">
        <table style="width: 92% ">
            <tr>

                <td class="tdRecordValue">

                  <!--  &lt;!&ndash;                            <textarea id="zs" autoHeight="true" class="textarea" th:text="${record?.info?.zs}" ></textarea>&ndash;&gt;-->
                    <input onkeydown="keydown(0)" id="input0" oninput="checkInputLength(this, 'input1')"  th:value="${record?.Info?.fydetailList?.input0}" type="text"    class="inputValue"  style="box-shadow: none;width: 100%; overflow: hidden; text-overflow:clip !important; resize:none; line-height: 1em; word-break:break-all;" ></input>
                </td>
            </tr>
            <tr>

                <td><hr style="height:1px;border:none;border-top:1px dotted #185598;margin: 0"/></td>
            </tr>


            <tr>