从软键虚拟键盘输入最多 10 个字符

Question

我在使用虚拟键盘时设置最大文本长度时遇到问题。当我在普通键盘上输入时，文本的最大长度为 10 个字符（在输入字段中使用 maxlength），但是当我开始使用虚拟键盘时，我可以输入我想要的字符数。如何从虚拟键盘键入最多 10 个字符的文本长度。请帮忙。这是虚拟键盘的 JS 代码。我知道我需要在这段代码中设置 var 但我是 jQuery 新手，这对我来说很难。

(function ($) {

$.fn.softkeys = function(options) {

    var settings = $.extend({
            layout : [],
            target : '',
            rowSeperator : 'br',
            buttonWrapper : 'li'
        },  options);

    var createRow = function(obj, buttons) {
            for (var i = 0; i < buttons.length; i++) {
                createButton(obj, buttons[i]);

            }

            obj.append('<'+settings.rowSeperator+'>');
        },

        createButton = function(obj, button) {
            var character = '',
                type = 'letter',
                styleClass = '';

            switch(typeof button) {
                case 'array' :
            case 'object' :
                    if(typeof button[0] !== 'undefined') {
                        character += '<span>'+button[0]+'</span>';
                    }
                    if(typeof button[1] !== 'undefined') {
                        character += '<span>'+button[1]+'</span>';
                    }
                    type = 'symbol';
                    break;

                case 'string' :
                    switch(button) {
                        case 'capslock' :
                            character = '<span>caps</span>';
                            type = 'capslock';
                            break;

                        case 'shift' :
                            character = '<span>shift</span>';
                            type = 'shift';
                            break;

                        case 'return' :
                            character = '<span>return</span>';
                            type = 'return';
                            break;

                        case 'reset' :
                            character = '<span>reset</span>';
                            type = 'reset';
                            break;

                        case 'tab' :
                            character = '<span>tab</span>';
                            type = 'tab';
                            break;

                        case 'space' :
                            character = '<span>space</span>';
                            type = 'space';
                            styleClass = 'softkeys__btn--space';
                            break;

                        case 'delete' :
                            character = '<span>delete</span>';
                            type = 'delete';
                            break;

                        default :
                            character = button;
                            type = 'letter';
                            break;
                    }

                    break;
            }

            obj.append('<'+settings.buttonWrapper+' class="softkeys__btn  
'+styleClass+'" data-
type="'+type+'">'+character+'</'+settings.buttonWrapper+'>');
        },

        bindKeyPress = function(obj) {
            obj.children(settings.buttonWrapper).on('click touchstart', 
function(event){
                event.preventDefault();

                var character = '',
                    type = $(this).data('type'),
                    targetValue = $(settings.target).val();

                switch(type) {
                    case 'capslock' :
                        toggleCase(obj);
                        break;

                    case 'shift' :
                        toggleCase(obj);
                        toggleAlt(obj);
                        break;

                    case 'return' :
                        character = '\n';
                        break;

                    case 'reset' :
                        targetValue = targetValue.substr(0, 
targetValue.length - targetValue.length);
                        break;

                    case 'tab' :
                        character = '\t';
                        break;

                    case 'space' :
                        character = ' ';
                        break;

                    case 'delete' :
                        targetValue = targetValue.substr(0, 
targetValue.length - 1);
                        break;

                    case 'symbol' :
                        if(obj.hasClass('softkeys--alt')) {
                            character = 
$(this).children('span').eq(1).html();
                        } else {
                            character = 
$(this).children('span').eq(0).html();
                        }
                        break;

                    case 'letter' :
                        character = $(this).html();

                        if(obj.hasClass('softkeys--caps')) {
                            character = character.toUpperCase();
                        }

                        break;
                }

                $(settings.target).focus().val(targetValue + character);


            });
        },

        toggleCase = function(obj) {
            obj.toggleClass('softkeys--caps');
        },

        toggleAlt = function(obj) {
            obj.toggleClass('softkeys--alt');
        };

    return this.each(function(){
        for (var i = 0; i < settings.layout.length; i++) {
            createRow($(this), settings.layout[i]);
        }



        bindKeyPress($(this));
    });
};

}(jQuery));

Answer 1

最大长度

如果type属性的值为text、email、search、password、tel或url，则该属性指定最大字符数（UTF-16编码单位），用户可以输入。对于其他控件类型，它被忽略。它可以超过 size 属性的值。如果未指定，用户可以输入不限数量的字符。指定负数会导致默认行为（即用户可以输入无限数量的字符）。仅当属性的值已更改时才评估约束。

我对这个属性的理解是浏览器会检查keydown或keypress事件的值是否匹配或超过maxlength并返回false。

由于这些事件不是由虚拟键盘触发的，我建议在输入值时模仿这一点。

例如：

var newValue = targetValue + character;
if(newValue.length < $(settings.target).attr("maxlength")){
  $(settings.target).focus().val(newValue);
}