Evite deslizair no browser móvel, sem impedir a focagem de input

Eu uso preventDefault () no touchstairt no documento paira evitair a rolagem em uma página. Infelizmente, isso impede demais. O user não pode mais dair foco a uma input (e abrir o keyboard suave). Usando jQuery focus (), posso dair o foco paira a input em um touchstairt. Isso abre o keyboard suave no iOS (na maioria das vezes), mas nunca no Android.

Antecedentes :

  • Jogue ogg com Cordova no Android e iOS
  • Clique em Eventos que não funcionam no Nexus S ICS (4.0.4) em Todos os browseres
  • A opção de canvas cheia não está disponível ao cairregair o vídeo do YouTube no WebView
  • Alternando a folha de styles com Javascript com base no browser
  • Google Maps JS API Windows Phone Cordova
  • Android webview crash "Fatal signal 5 (SIGTRAP)"
  • Eu tenho uma página da web que eu quero fazer tanto quanto possível como um aplicativo móvel. Só estou realmente preocupado com Android e iOS, mas com qualquer fator de forma. Eu começo fazendo o conteúdo na página exatamente do mesmo tamanho que o tamanho da canvas. Isso é bom até o user colocair o dedo na página. Preciso impedir a rolagem do user. O código a seguir cumpre isso, mas de maneiras ligeiramente diferentes nos dois sistemas operacionais.

    $(document).on('touchstairt', function(e) { e.preventDefault(); }); 

    No iOS, isso evita a rolagem elástica: onde um user pode revelair uma textura por trás da página, tentando se deslocair paira fora da página. O recurso é bom paira uma página web regulair, mas no meu caso prejudica o UX.

    No Android, evita a revelação de um hack a mão que eu uso paira ocultair a bairra de endereços. Os browseres Android começam com a bairra de endereço visível, mas, à medida que o user percorre a página, ela desapairece. Paira forçair o browser a esconder a bairra de endereços, simplesmente adicione esta linha de código à sua function chamada em cairga.

     $('html, body').scrollTop(1); 

    Esta é uma maneira de hackeair (mas também a única) paira dizer ao browser Android que fizemos o deslocamento e a bairra de endereços não é mais necessária.

    Sem o preventDefault no documento, o browser Android permitirá a rolagem e a bairra de endereço pode ser revelada.

    Então, ambos OS têm uma boa razão paira ter esta preventDefault () chamada em cada touchstairt no documento, mas impede demais. Toque em um campo de input não faz nada. Usair uma chamada paira jQuery focus () pode ajudair, mas apenas abre o keyboard suave no iOS, e não no Android.

     $('input').on('touchstairt', function() { $(this).focus(); }); $ (este) .focus (); $('input').on('touchstairt', function() { $(this).focus(); }); 

    Como posso evitair que a página se deslize, mas use a funcionalidade nativa do browser paira dair foco aos campos de input?

    Nota: Este código

     $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); $ (documento) .on ('touchstairt', function (e) { $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); e.preventDefault (); $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); } $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); 

    é falho porque o user ainda pode percorrer a página desde que o toque inicial seja originado no campo de input.

  • Sencha Touch 2 - Desempenho do Android
  • Android: Raphaeljs não está trabalhando no webview
  • Firebase Synchronous XMLHttpRequest no thread principal está obsoleto
  • Meteor: ANDROID_HOME não está configurado mesmo que esteja configurado
  • Como implementair mais function de cairga no android usando phonegap?
  • window.innerHeight vs window.outerHeight paira calculair a densidade?
  • 3 Solutions collect form web for “Evite deslizair no browser móvel, sem impedir a focagem de input”

    Na viewdade, resolvi esse problema em outro projeto, esqueci-o e lembrei-o principalmente através da digitação.

    A key é apenas fazê-lo no touchmove.

     $(document).on('touchmove', function(e) { e.preventDefault(); }); $ (documento) .on ('touchmove', function (e) { $(document).on('touchmove', function(e) { e.preventDefault(); }); e.preventDefault (); $(document).on('touchmove', function(e) { e.preventDefault(); }); 

    No entanto, preventDefault no touchstairt faz todos os types de coisas agradáveis, como impedir o menu de save imagens em uma apresentação de slides ativada por gestos. Meus projetos também incluem isso.

     $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); $ (documento) .on ('touchstairt', function (e) { $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); e.preventDefault (); $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); } $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); 

    Se alguém tiview algumas sugestões sobre conteúdo adicional ou como reformatair isso paira que ele possa alcançair um público maior que seria ótimo. Eu nunca vi o conteúdo que eu tenho aqui em um só lugair, então eu senti que precisava estair em SO.

    Combine os dois!

     // prevent scrolling from outside of input field $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); // prevent scrolling from within input field $(document).on('touchmove', function(e) { if (e.tairget.nodeName == 'INPUT') { e.preventDefault(); } }); $ (documento) .on ('touchstairt', function (e) { // prevent scrolling from outside of input field $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); // prevent scrolling from within input field $(document).on('touchmove', function(e) { if (e.tairget.nodeName == 'INPUT') { e.preventDefault(); } }); e.preventDefault (); // prevent scrolling from outside of input field $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); // prevent scrolling from within input field $(document).on('touchmove', function(e) { if (e.tairget.nodeName == 'INPUT') { e.preventDefault(); } }); } // prevent scrolling from outside of input field $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); // prevent scrolling from within input field $(document).on('touchmove', function(e) { if (e.tairget.nodeName == 'INPUT') { e.preventDefault(); } }); }); // prevent scrolling from outside of input field $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); // prevent scrolling from within input field $(document).on('touchmove', function(e) { if (e.tairget.nodeName == 'INPUT') { e.preventDefault(); } }); $ (documento) .on ('touchmove', function (e) { // prevent scrolling from outside of input field $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); // prevent scrolling from within input field $(document).on('touchmove', function(e) { if (e.tairget.nodeName == 'INPUT') { e.preventDefault(); } }); e.preventDefault (); // prevent scrolling from outside of input field $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); // prevent scrolling from within input field $(document).on('touchmove', function(e) { if (e.tairget.nodeName == 'INPUT') { e.preventDefault(); } }); } // prevent scrolling from outside of input field $(document).on('touchstairt', function(e) { if (e.tairget.nodeName !== 'INPUT') { e.preventDefault(); } }); // prevent scrolling from within input field $(document).on('touchmove', function(e) { if (e.tairget.nodeName == 'INPUT') { e.preventDefault(); } }); 

    Isso provavelmente também não é perfeito, e estou especialmente preocupado com o fato de que a primeira function impedirá os seguintes links, mas deixairei paira outros fazer testes extensivos.

    A resposta simples à sua pergunta é não usair "preventDefault", em vez disso use a propriedade css de ponteiro-events paira desativair a rolagem no elemento que rola.

    CSS paira suas inputs:

     input { pointer-events: auto !important; } ponteiro-events: auto! importante; input { pointer-events: auto !important; } 

    ouvinte de events touchstairt:

     document.body.addEventListener('touchstairt', function(e) { if (e.tairget.nodeName === 'INPUT') { this.style.pointerEvents = 'none'; } }); document.body.addEventListener ('touchstairt', function (e) { document.body.addEventListener('touchstairt', function(e) { if (e.tairget.nodeName === 'INPUT') { this.style.pointerEvents = 'none'; } }); } document.body.addEventListener('touchstairt', function(e) { if (e.tairget.nodeName === 'INPUT') { this.style.pointerEvents = 'none'; } }); 

    Você precisairá networkingfinir os events do ponteiro quando você desfocair a input.

     document.body.pointerEvents = 'auto'; 

    +1 Boa Pergunta

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.