textarea js实现限制每行个数，限制行数，限制字节数

一笙箫

2024-04-28 帮助1人

标题在工作上需要用到一个自定义控件，多行文本框，需要限制文本框的行数，文字个数，以及字节数，这是用js实现的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<style>
    #foo {
        width: 200px;
        height: 200px;
        resize: none;
    }
</style>

<body>
    <div>
        <textarea id="foo"></textarea>
    </div>

</body>

<script>
    $(document).ready(function () {


        var textArea = $('#foo');

        var maxLines = 5;

        var maxLineLength = 4;

        var maxByteLength = 1000;

        var MaxLineByteLength = 1000;

        var flag = true;

        var newstr;

        var ctrlv = false;


        textArea.on('keydown', function (e) {


            var text = textArea.val();

            var lines = text.split('\n');

            if (e.keyCode == 13) { //回车事件处理

                var caret = textArea.get(0).selectionStart; //获取当前光标位置

                var line = 0;

                var charCount = 0;


                if (getLen(textArea.val()) >= maxByteLength) {

                    return false;
                }
                if (lines.length < maxLines) { //现在页面的总行数小于设置的总行数，则回车键执行

                    return true;

                } else {

                    $.each(lines, function (i, e) {

                        charCount  = e.length;

                        if (caret <= charCount) {

                            line = i;

                            return false;

                        }

                        charCount  = 1;

                    });

                    if (line   1 < maxLines) { //现在光标位置所在的行数小于总行数

                        charCount  = lines[line].length; //当前行数的字符个数

                        if (caret <= charCount) { //光标位置小于字符个数

                            lines.splice(maxLines - 1, 1); //去掉最后一行

                            newstr = lines.join("\n");

                            newstr = newstr.slice(0, caret)   '\n'   newstr.slice(caret);

                            flag = false;

                            if (flag == false && e.keyCode == 13) {
                                textArea.val(newstr);
                            }
                            flag = true;

                            return false;
                        }


                    } else {

                        return lines.length < maxLines;
                    }
                }

            } else if (e.keyCode == 8 || (e.keyCode >= 37 && e.keyCode <= 40)) {


            } else if (e.ctrlKey && e.keyCode == 86) {

                // var caret = textArea.get(0).selectionStart; //获取当前光标位置
                // var line = 0;//当前行数
                // var charCount = 0;

                // $.each(lines, function (i, e) {

                //     charCount  = e.length;

                //     if (caret <= charCount) {

                //         line = i;

                //         return false;

                //     }

                //     charCount  = 1;

                // });

                // if (line == maxLines) {
                //     return false;
                // } else {
                    ctrlv = true;
                // }



            } else {

                var caret = textArea.get(0).selectionStart;

                var line = 0;

                var charCount = 0;

                $.each(lines, function (i, e) {

                    charCount  = e.length;

                    if (caret <= charCount) {
                        line = i;
                        return false;
                    }
                    charCount  = 1;

                });

                if (getLen(textArea.val()) >= maxByteLength) { //限制字节数

                    return false;

                }

                var theLine = lines[line];

                if (getLen(theLine) >= MaxLineByteLength) {

                    return false;
                }

                return theLine.length < maxLineLength;

            }
        });

        textArea.on('input', function (e) {
            var text = textArea.val();

            var lines = text.split('\n');



            if (flag == false && e.keyCode == 13) {
                textArea.val(newstr);
            } else if (ctrlv) {

                var zuo = "";
                var you = "";

                var caret = textArea.get(0).selectionStart;

                var line = 0;

                var charCount = 0;

                $.each(lines, function (i, e) {

                    charCount  = e.length;

                    if (caret <= charCount) {
                        line = i;
                        return false;
                    }
                    charCount  = 1;

                });



                var zhantie = lines[line].substring(0, maxLineLength);


                //将上面的字符便厉，然后后面加换行
                for (let index = 0; index < line; index  ) {
                    zuo  = lines[index]   '\n';

                }

                //将下面的字符遍历，最后一行不加换行，其余的也加换行
                for (let index = line   1; index < lines.length; index  ) {

                    if (index == lines.length - 1) {

                        you = '\n'   you   lines[index];

                    } else {

                        you = you   lines[index]   '\n';
                    }
                }


                var zong = zuo   zhantie    you;

                textArea.val(zong);

                ctrlv = false;

                if (getLen(textArea.val()) >= maxByteLength) { //限制字节数

                    return false;

                }

                var theLine = lines[line];

                if (getLen(theLine) >= MaxLineByteLength) {

                    return false;
                }

                return theLine.length < maxLineLength;




            } else if (flag == true && e.keyCode == 13) {
                var aa = textArea.val().split('\n');
                var bb = aa.join('\n');
                textArea.val(bb);

            }

            flag = true;

        });



        textArea.on('compositionend', function (e) {
            console.warn('中文输入确认后触发了');
            var textvalue = textArea.val();
            var lines = textArea.val().split('\n');
            var caret = textArea.get(0).selectionStart;
            var line = 0;
            var charCount = 0;

            var liuAttr = [];

            $.each(lines, function (i, e) {

                charCount  = e.length;

                if (caret <= charCount) { //光标位置小于字符个数

                    if (maxLineLength / 2 < MaxLineByteLength / 2) { //如果每行个数小于每行字节个数

                        lines[i] = lines[i].substring(0, maxLineLength);

                        var newstr = lines.join('\n');

                        textArea.val(newstr);

                        line = i;
                    } else {

                        //每行的数是否满足最大行字节数
                        if (getLen(lines[i]) > MaxLineByteLength) {
                            let len = 0;

                            const chinese = /[^\x00-\xff]/ig;

                            for (let l = 0; l < lines[i].length; l  ) {
                                if (lines[i].charAt(l).match(chinese)) {
                                    len  = 2;
                                } else {
                                    len  = 1;
                                }
                                if (len > MaxLineByteLength) {

                                    var a = lines[i].slice(0, l);
                                    liuAttr[i] = a;
                                    textArea.val(liuAttr.join('\n'));
                                    return;
                                }
                            }

                        }

                    }

                }
                liuAttr[i] = lines[i];
                textArea.val(liuAttr.join('\n'));
                charCount  = 1;



                if (getLen(textvalue) > maxByteLength) { //字节数大于总的字节数

                    let len = 0;

                    const chinese = /[^\x00-\xff]/ig;

                    for (let i = 0; i < textvalue.length; i  ) {
                        if (textvalue.charAt(i).match(chinese)) {
                            len  = 2;
                        } else {
                            len  = 1;
                        }
                        if (len > maxByteLength) {
                            return textArea.val(textvalue.slice(0, i));
                        }
                    }
                    return textArea.val(textvalue);

                }

            });
        })


        //获取字节
        function getLen(str) {
            const chinese = /[^\x00-\xff]/g;
            const lineBreak = /[\r\n]/g;
            let newVal = str.replace(chinese, "**");
            newVal = newVal.replace(lineBreak, "**")
            return newVal.length;
        }


    });
</script>

</html>

现在主要的部分写完了，之后还会在进行补充更新
添加了复制粘贴功能

这篇好文章是转载于：学新通技术网

textarea js实现限制每行个数，限制行数，限制字节数

标题在工作上需要用到一个自定义控件，多行文本框，需要限制文本框的行数，文字个数，以及字节数，这是用js实现的

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开