Переопределите OSX нажмите и удерживайте кнопку выбора акцента в браузере

Question

Если вы нажмете и удерживаете клавишу в OSX, вы получите всплывающее окно, в котором вы можете выбрать разные символы. Я написал небольшой webtool: http://kasperpeulen.github.io/PressAndHold/, который делает то же самое, но я добавил много математических символов во всплывающие окна. Теперь я хочу переопределить собственный инструмент OSX. То, что я попытался это:

$('input').on('keydown', function (e) { 
    e.preventDefault(); 
}); 

DEMO: http://jsfiddle.net/nggnjo5a/2/

В Firefox это переопределить родной инструмент OSX. В хроме и сафари, к сожалению, этого не происходит. Есть ли другой способ убедиться, что родное приложение OSX отключено на моем веб-сайте?

Answer 1

Мне повезло с поворотом поля type="text" в поле type="password" и обратно очень быстро. Я заметил, что удерживание ключа в поле пароля не вызывает всплывающее окно с акцентом и хочет воспользоваться этим поведением. Этот трюк не работает в 100% случаев, и это уродливый взлом - но это лучше, чем ничего. Ниже приведен полный код, который я использую. Я запускаю его на первом событии фокуса ввода.

this.disableAccentPopup = function(_input, callback){  
    var last_key_down = false; // last key pressed 
    var last_key_count = 0; // number of keydown events for last key pressed 
    var keys_down  = {}; // all keys being held down 

    var input = _input.cloneNode(true); // We will swap this with the original input on first focus 
    input.type = "password"; // Password fields don't suffer from accent UI 
    input.value = ''; // Empty this so we don't see the password bullets 
    input.focus(); 

    // Right before focus... 
    _input.addEventListener("focus", function(e){ 
     // This setTimeout is needed so we can get the proper selectionStart and selectionEnd values 
     setTimeout(function(){ 
      var t = _input.value; 
      var s = _input.selectionStart; 
      var e = _input.selectionEnd; 
      _input.parentNode.replaceChild(input, _input); 
      input.focus(); 
      // This setTimeout is needed to set the input type w/o breaking the input's behavior 
      setTimeout(function(){ 
       input.value = t; 

       input.type = 'input'; 

       input.setSelectionRange(s, e); 
       if (callback) { 
        setTimeout(function(){ 
         callback(input); 
        }, 0); 
       } 
      }, 0); 
     }, 0); 
    }); 

    input.addEventListener("keydown", function(e){ 
     keys_down[util.keyIdentifierToKeyCode(e)] = true; 
     if (!e.metaKey && e.keyIdentifier.substr(0,2) == "U+") { 
      if (last_key_down && last_key_count >= 1) { 
       // if this is not the first keydown event for this char, 
       // we can safely set the type to input 

       input.type = 'input'; 

       if (last_key_down == util.keyIdentifierToKeyCode(e)) { 
        e.preventDefault(); 
       } else { 
        last_key_count = 0; 
       } 
      } 
      last_key_down = util.keyIdentifierToKeyCode(e); 
      last_key_count++; 
     } 
    }); 

    input.addEventListener("keyup", function(e){ 
     delete keys_down[util.keyIdentifierToKeyCode(e)]; 
     if (!e.metaKey) { 
      // if _all_ keys are up 
      if (Object.keys(keys_down).length == 0) { 
       last_key_down = false; 
       last_key_count = 0; 
      } 
     } 
    }); 
}