ソフトキーから最大10文字のタイプの仮想キーボード

Question

仮想キーボードを使用しているときにテキストの最大長を設定する際に問題があります。私は通常のキーボードで入力しているときにテキストのmaxlengthは（入力フィールドでmaxlengthを使用して）10文字ですが、私は仮想キーボードを使用すると、私はいくつの文字を入力することができますを開始する。どのように私は仮想キーボードから最大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

MAXLENGTH

type属性の値がtext、email、search、password、tel、又はurlある場合、この属性はUTF-16の文字の最大数（指定コード単位）を入力することができます。他のコントロールタイプの場合は無視されます。 サイズ属性の値を超えることができます。指定されていない場合、ユーザーは無制限の文字数を入力できます。負の数を指定すると、デフォルトの動作になります（つまり、ユーザーは無制限の文字数を入力できます）。この制約は、属性の値が変更された場合にのみ評価されます。この属性の

私の理解では、ブラウザが値が一致する場合​​またはkeypressイベント時に確認するか、maxlengthを超え、falseを返しますということです。

これらのイベントは仮想キーボードによってトリガーされていないため、値を入力するときにこれを模倣することをお勧めします。例えば

、のようなもの：私の質問に答えるための

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