如何使用 Tabulator 限制 editable table 中输入的最大长度？

Question

当我使用 maxLength:5 验证器时，没有 maxlength 属性应用于 <input />，因此用户可以超过限制。是否可以直接限制他们的输入，而不是让他们违反规则，然后必须向他们解释哪里出了问题？

我认为这总体上会是更好的用户体验，并且对用户和开发人员来说都更容易。

此外，我尝试使用一些回调手动将最大长度添加到 <input />，但似乎在其中任何一个触发时都没有创建输入。

编辑：这是我们使用的代码：

    var table = new Tabulator("#datatable", {
        height: "480px", // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
        layout: "fitDataFill",
        columns: [{ "field": "ID", "frozen": true, "title": "ID", "validator": [] },
        { "editor": "input", "field": "NameEN", "validator": ["maxLength:5"] }],
        addRowPos: "top",
        cellEdited: function (cell) {
            cell.validate();
            var element = cell.getElement();
            $(element).addClass('edited-cell');
            dispatch(actions.EDIT_DATA);
        },
        validationMode: "blocking",
        validationFailed: function (cell, value, validators) {
            var validationMessages = "";
            validators.forEach((validator) => {
                var message = $('#validation-' + validator.type).val() + "\n";
                validationMessages += message.replace('{value}', validator.parameters);
            });
            //cell - cell component for the edited cell
            //value - the value that failed validation
            //validatiors - an array of validator objects that failed
        },
        headerFilter: true
    });

Answer 1

tabulator 中的验证和编辑系统是完全独立的。 Tabulator 中的验证器不会影响编辑器，它们会在设置值后应用。

一旦提交了编辑器上的值，在本例中是单元格失去焦点，然后将其提交给验证器函数，如果通过则进行更改，如果失败则将单元格标记为用户无效并且焦点传递回单元格以便他们可以更正他们的错误。

如果你想阻止用户输入超过 5 个字符，那么你需要在编辑器上进行设置：

{field:"NameEN", editor:"input", editorParams:{
    elementAttributes:{
        maxlength:"10", //set the maximum character length of the input element to 10 characters
    }
}}

如何使用 Tabulator 限制 editable table 中输入的最大长度？

How do you limit the maxlength of inputs in an editable table using Tabulator?

javascript

tabulator