소프트 키 가상 키보드에서 최대 10 자 유형

Question

가상 키보드를 사용할 때 텍스트의 최대 길이를 설정하는 데 문제가 있습니다. 일반 키보드에서 입력 할 때 maxlength는 10 자 (입력 필드에서 maxlength 사용)이지만 가상 키보드를 사용하기 시작하면 원하는 문자 수를 입력 할 수 있습니다. 가상 키보드에서 최대 10 자까지 텍스트 길이를 입력하려면 어떻게해야합니까? 도와주세요. 이것은 가상 키보드 용 JS 코드입니다. 나는이 코드에서 var를 설정해야한다는 것을 알고 있지만 jQuery에서 새로 왔고 나에게 어렵다. 유형 특성 값 text, email, search, password, tel 또는 url 경우

(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

최대 길이

이 속성은 UTF-16 (최대 문자 수 지정 코드 단위)를 입력해야합니다. 다른 컨트롤 유형의 경우 무시됩니다. 크기 속성의 값을 초과 할 수 있습니다. 지정하지 않으면 사용자는 무제한 문자 수를 입력 할 수 있습니다. 음수를 지정하면 기본 동작 (즉, 사용자가 무제한 문자 수를 입력 할 수 있음)이됩니다. 제한 조건은 속성 값이 변경된 경우에만 평가됩니다. 이 속성의

나의 이해는 브라우저가 값이 일치하는 경우 keydown 또는 keypress 이벤트에 확인하거나 maxlength을 초과 false를 반환하는 것입니다.

이러한 이벤트는 가상 키보드에 의해 트리거되지 않기 때문에 값을 입력 할 때이 이벤트를 모방하는 것이 좋습니다. 같은

예를 들어

, 뭔가 내 질문에 대답하기위한

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