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

已于 2024-02-18 16:59:25 修改
阅读量966 收藏 22
点赞数 19
文章标签： 前端 javascript 开发语言
于 2024-02-18 16:54:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42206276/article/details/136154214
版权

多个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="/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>

                <td class="tdRecordValue">
                   <!-- &lt;!&ndash;                            <textarea id="zs" autoHeight="true" class="textarea" th:text="${record?.info?.zs}" ></textarea>&ndash;&gt;-->


                    <input id="input1" oninput="checkInputLength(this, 'input2')" onkeydown="keydown(1)" th:value="${record?.Info?.fydetailList?.input1}" type="text"    class="inputValue"  style="box-shadow: none;width: 100%; overflow:hidden; 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>

                <td class="tdRecordValue">
                   <!-- &lt;!&ndash;                            <textarea id="zs" autoHeight="true" class="textarea" th:text="${record?.info?.zs}" ></textarea>&ndash;&gt;-->
                    <input id="input2" oninput="checkInputLength(this, 'input3')" onkeydown="keydown(2)" th:value="${record?.Info?.fydetailList?.input2}" type="text"    class="inputValue"  style="box-shadow: none;width: 100%; overflow:hidden; 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>

                <td class="tdRecordValue">
                  <!--  &lt;!&ndash;                            <textarea id="zs" autoHeight="true" class="textarea" th:text="${record?.info?.zs}" ></textarea>&ndash;&gt;-->
                    <input id="input3" oninput="checkInputLength(this, 'input4')" onkeydown="keydown(3)" th:value="${record?.Info?.fydetailList?.input3}" type="text"    class="inputValue"  style="box-shadow: none;width: 100%; overflow:hidden; 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>

                <td class="tdRecordValue">
                   <!-- &lt;!&ndash;                            <textarea id="zs" autoHeight="true" class="textarea" th:text="${record?.info?.zs}" ></textarea>&ndash;&gt;-->
                    <input id="input4" oninput="checkInputLength(this, 'input5')" onkeydown="keydown(4)" th:value="${record?.Info?.fydetailList?.input4}" type="text"    class="inputValue"  style="box-shadow: none;width: 100%; overflow:hidden; 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>

                <td class="tdRecordValue">
                   <!-- &lt;!&ndash;                            <textarea id="zs" autoHeight="true" class="textarea" th:text="${record?.info?.zs}" ></textarea>&ndash;&gt;-->
                    <input id="input5" oninput="checkInputLength(this, 'input6')" onkeydown="keydown(5)" th:value="${record?.Info?.fydetailList?.input5}" type="text"   class="inputValue"  style="box-shadow: none;width: 100%; overflow:hidden; 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>

                <td class="tdRecordValue">
                   <!-- &lt;!&ndash;                            <textarea id="zs" autoHeight="true" class="textarea" th:text="${record?.info?.zs}" ></textarea>&ndash;&gt;-->
                    <input id="input6" oninput="checkInputLength(this, 'input7')" onkeydown="keydown(6)" th:value="${record?.Info?.fydetailList?.input6}" type="text"    class="inputValue"  style="box-shadow: none;width: 100%; overflow:hidden; 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>

                <td class="tdRecordValue">
                   <!-- &lt;!&ndash;                            <textarea id="zs" autoHeight="true" class="textarea" th:text="${record?.info?.zs}" ></textarea>&ndash;&gt;-->
                    <input id="input7" oninput="checkInputLength(this, 'input8')" onkeydown="keydown(7)" th:value="${record?.Info?.fydetailList?.input7}" type="text"    class="inputValue"  style="box-shadow: none;width: 100%; overflow:hidden; 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>

                <td class="tdRecordValue">
                   <!-- &lt;!&ndash;                            <textarea id="zs" autoHeight="true" class="textarea" th:text="${record?.info?.zs}" ></textarea>&ndash;&gt;-->
                    <input id="input8" oninput="checkInputLength(this, 'input9')" onkeydown="keydown(8)" th:value="${record?.Info?.fydetailList?.input8}" type="text"    class="inputValue"  style="box-shadow: none;width: 100%; overflow:hidden; 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>

                <td class="tdRecordValue">
                    <!--&lt;!&ndash;                            <textarea id="zs" autoHeight="true" class="textarea" th:text="${record?.info?.zs}" ></textarea>&ndash;&gt;-->
                    <input  id="input9" oninput="checkInputLength(this, 'input10')" onkeydown="keydown(9)" th:value="${record?.Info?.fydetailList?.input9}" type="text"    class="inputValue"  style="box-shadow: none;width: 100%; overflow:hidden; 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>

                <td class="tdRecordValue">
                   <!-- &lt;!&ndash;                            <textarea id="zs" autoHeight="true" class="textarea" th:text="${record?.info?.zs}" ></textarea>&ndash;&gt;-->
                    <input id="input10" oninput="checkInputLength(this, 'input11')" onkeydown="keydown(10)" th:value="${record?.Info?.fydetailList?.input10}" type="text"    class="inputValue"  style="box-shadow: none;width: 100%; overflow:hidden; 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>

                <td class="tdRecordValue">
                   <!-- &lt;!&ndash;                            <textarea id="zs" autoHeight="true" class="textarea" th:text="${record?.info?.zs}" ></textarea>&ndash;&gt;-->
                    <input id="input11" oninput="checkInputLength(this, 'input12')" onkeydown="keydown(11)" th:value="${record?.Info?.fydetailList?.input11}" type="text"   class="inputValue"  style="box-shadow: none;width: 100%; overflow:hidden; 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>

                <td class="tdRecordValue">
                    <!--&lt;!&ndash;                            <textarea id="zs" autoHeight="true" class="textarea" th:text="${record?.info?.zs}" ></textarea>&ndash;&gt;-->
                    <input id="input12" oninput="checkInputLength(this, 'input13')" onkeydown="keydown(12)" th:value="${record?.Info?.fydetailList?.input12}" type="text"    class="inputValue"  style="box-shadow: none;width: 100%; overflow:hidden; 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>

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

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



        <div style="width:100%; height: auto">
            <div style="float: right; width:220px; height: 80px">
                <div style="float: left; height:80px; display:inline-block; vertical-align:middle">
                    医生签名:
                </div>
                <div  style=" display:inline-block; vertical-align:middle">
                    <img style="vertical-align:middle;width: 100px;" src="" alt="" th:src="${'data:image/jpeg;base64,'+ record?.signature?.baseImg}" >
                </div>
                                        <div  contenteditable="true" title="你可以删除此内容，以便在打印后手写签名，此更改不会保存，若不慎删除，点击保存后刷新即可" style=" height:80px; display:inline-block; vertical-align:middle">
                                            <img style="vertical-align:middle;width: 100px;" src="" alt="" th:src="${'data:image/jpeg;base64,'+ record?.signature?.baseImg}" >
                                        </div>
            </div>
        </div>
    </div>

</div>

关键问题来了
当前行input文本溢出时禁止输入，并且超出部分不显示，这里禁止输入用maxlength是不可以的，因为同为32个字符的话，汉字的宽度比字母和数字要宽，导致每一行的文本宽度不一致，就会出现空格，

解决input文本溢出时禁止输入

解决办法：监听input输入的文本到达input尾部事件

function checkInputLength(input, nextInputId) {
        const  str = input.value;
       /* console.log(input.scrollWidth,input.offsetWidth,input.clientWidth,nextInputId)*/
        if (input.scrollWidth < (input.offsetWidth-8)) {

        }else{/*
           */ console.log("溢出了",str)
            input.value = str.slice(0, str.length - 1);
           /* console.log("截掉后",input.value)*/
            document.getElementById(nextInputId).focus();
            if(nextInputId == "input13"){
                document.getElementById(nextInputId).blur();
            }
        }
    }

input.scrollWidth 只要小于 input.offsetWidth就说明没有到达尾部，大于的话就自动聚焦到下一个input
测试中有一个问题：

当连续输入超出的文本最后一个字会显示不全

解决办法：字符串删除最后一个字符
input.value = str.slice(0, str.length - 1);
最后完美解决！！！

即将到30的程序员
关注
  • 19
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css input 内容换行显示,CSS - 如何实现强制不换行、自动换行、强制换行 以及 chrom默认焦点 IE下 Input 默认出现叉...
weixin_39905725的博客
08-03 5486
*:focus {outline: none;}input::-ms-clear {display:none;}一般的文字截断(适用于内联与块)：.text-overflow {display:block;/*内联对象需加*/width:31em;/*指定宽度*/word-break:keep-all;/* 不换行 */white-space:nowrap;/* 强制在同一行内显示所有文本，直到文...
超出边距自动换行+ input 输入框在自动填充式背景颜色变了
HeiYanMin的博客
10-15 1603
vue 超出边距自动换行 代码：flex-wrap: wrap，放在你所要实现效果的父级容器
输入框自动换行
aybaiwan的博客
07-06 6637
解决输入框不能自动换行问题，为input标签添加type="textarea" 属性；这里的 :rows="9" 是指设置 input输入框所占区域的行数，即高度，有几行；当输入内容超过9行时，自动换行。
input文本框输入溢出的时候，鼠标悬停显示全部信息
热门推荐
笑到世界都狼狈的博客
04-21 1万+
想要鼠标悬停在文本框上时，显示文本框详情，只要title的值等于文本框的value值就可以了 <input onmouseover="this.title=this.value">
获取焦点 document.getElementById(“input“).focus()；
jieweiwujie的博客
08-31 1208
document.getElementById("input").focus();
uniapp实现input自动对焦
qwerewf的博客
09-13 1万+
需求：最近在做电商项目的时候使用到了uniapp的搜索插件，但产品经理觉得插件有些不够人性化。需要页面进入就让搜索框处于自动对焦状态 代码： <input :placeholder="placeholder" @input="inputChange" confirm-type="search" @confirm="triggerConfirm" class="input" :class="{'center':!active && mode === 2}" :focus="is
uniapp中input框聚焦
最新发布
huang_jimei的博客
11-14 1063
在需要聚焦的方法内写入。然后在失去焦点的时候。
JSP中的FORM表单中只有一个input文本时，按回车键将会自动提交表单
10-20
这是因为浏览器遵循一种默认的行为：在一个表单内，如果只有一个单行文本输入域（`<input type="text">`），在该输入域中按下回车键，浏览器会认为这是用户的提交意图，从而自动提交表单。 这个问题在实际应用中...
解决layui的input独占一行的问题
10-16
今天小编就为大家分享一篇解决layui的input独占一行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Python 实现一行输入多个数字(用空格隔开)
09-16
总的来说，Python的`input().split()`和`map()`函数提供了灵活的方式处理一行内的多个输入。不论是数字还是字符串，只要正确设定分隔符，就能轻松实现数据的输入与转换。这种能力使得Python在处理用户交互或读取格式...
如何防止INPUT按回车自动提交表单FORM
11-29
通过JavaScript为`<input>`元素添加`onkeydown`事件，监听键盘事件，当检测到回车键（键码13）被按下时，返回`false`阻止表单提交。 ```html <!doctype html> <title>test <!--为input增加一个按键...
uni-app 实现验证码框自动聚焦
Li_na_na01的博客
06-07 1797
做手机验证码登录 想实现输入后自动聚焦到下一个文本框 其实非常简单 但是实现过程中找了好多 在ref实例上或者dom上绑定focus 都没生效 记录下
【uniapp】如何手动实现让input文本框聚焦
TA远方
12-25 9622
尝试手动实现，调用focus事件，想到它可不像之前的h5项目，是没有操作dom的方法，所以暂时搁置，在网上找了解决方案都不合适。开发中遇到一个问题，希望在每次操作页面完成后，input文本框都能自动聚焦，那么问题来了，应该怎么做，接下来请继续往下看...
input输入框字数超出长度显示省略号...
sally18的博客
07-25 1万+
<!DOCTYPE html> <html> <head> <title>长度超过限制</title> </head> <body> <input type="" name="" style="overflow:hidden; white-space:nowrap; text-overflow:...
html输入框可以自动换行,input text
weixin_42144366的博客
05-30 1万+
The element is used to select user information.is single line by definitionAn element can vary in many ways, depending on the type attribute. An element can be of typetext field, checkbox, passwor...
input 输入换行
Triones
03-18 1万+
html中第二次遇到在chrome下正常，但是在蛋疼的ie下各种毛病，注意： 1. width（能不设置就不设置，设置了要注意，是不是满足，这次问题就是出在，长度不够，导致换行），问题的关键是，很少能想到是width的问题，去掉width一切正常
vue实现多个input框，上一个输入完自动聚焦下一个
04-10
回答：你好！关于你的问题，可以使用ref给每个input框定义一个引用名，然后在输入完成后使用该引用名去聚焦下一个input框即可。如果你愿意听一个笑话，我可以给你讲一个：为什么越来越多的程序员开始练腹肌？因为他们发现光写程序不但不会让女孩子为自己倒追，反而可能更加无法靠近女神。哈哈，开个玩笑，希望你觉得有趣！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值