【Handsontable】最大文字数制限(MaxLength)

はじめに

これは、Handsontable Advent Calendar 2018の15日目の記事となります。

前回「【Handsontable】変更マークの付与と必須チェック」では変更マークの付与と必須チェックを行いました、今回は最大文字数制限(MaxLength)を実装していきます。

最大文字数制限(MaxLength)

Handsontableのセル入力では、MaxLengthがサポートされていません。
よって、ユーザー側でカスタムエディタで対応するようにしています。
参照：Handsontable Limit Cell Characters

(function (Handsontable) {

    'use strict';

    var MaxLengthEditor = Handsontable.editors.TextEditor.prototype.extend();

    MaxLengthEditor.prototype.prepare = function () {
        Handsontable.editors.TextEditor.prototype.prepare.apply(this, arguments);

        this.TEXTAREA.maxLength = this.cellProperties.maxLength;
    };

    Handsontable.editors.MaxLengthEditor = MaxLengthEditor;
    Handsontable.editors.registerEditor('maxlength', MaxLengthEditor);

})(Handsontable);

var hot = new Handsontable(grid, {

最大文字数の桁数とカスタムエディタ定義のオプションを追加します。
maxLength: 5, editor: 'maxlength'

var hot = new Handsontable(grid, {
    data: [],
    colHeaders: ['編集', '選択', '商品CD', '商品名', '単価', '備考'],
    columns: [
        { data: COL_EDIT, readOnly: true, type: 'text' },
        { data: COL_SELECT, type: 'checkbox' },
        { data: COL_PRODUCTCODE, type: 'text', width: 80, validator: function (value, callback) { callback(true); }, maxLength: 5, editor: 'maxlength' },
        { data: COL_PRODUCTNAME, type: 'text', width: 200, className: "htLeft htMiddle", validator: function (value, callback) { callback(true); }, maxLength: 30, editor: 'maxlength' },
        { data: COL_UNITPRICE, type: 'numeric', numericFormat: { pattern: '0,00', culture: 'ja-JP' }, validator: function (value, callback) { callback(true); } },
        { data: COL_COMMENT, type: 'text', width: 300, className: "htLeft htMiddle", validator: function (value, callback) { callback(true); }, maxLength: 100, editor: 'maxlength' }
    ],

こうすることで例えば商品コードには、5桁までしか入力できなくなります。