iphone klawiatura nie ukrywając, gdy dotykając ekranu

mam pole wejściowe z rodzaju numeruiphone klawiatura nie ukrywając, gdy dotykając ekranu

<input type="number" pattern="[0-9]*"/>

W normalnych przeglądarek, piszę kilka numerów, a ja dotykając ekranu, ukrywa iPhone/iPad klawiaturę .

Ale to nie działa, jeśli jest wewnątrz iframe. musimy wyraźnie kliknąć przycisk Wykonaj. Ten problem dotyczy tylko iPhone/iPad

To jest problem z ramką iframe. Każda poprawka przy użyciu JavaScript/Jquery byłaby bardzo ceniona.

Updated

Tried

document.activeElement.blur();

i focusOut gdy zdarzenie wywołane w javascript. żaden z nich nie działa.

$(document).on('focusin', function(){ 
    $('input').css("background-color", "green"); 
     console.log('focusin!') 
    }); 

    $(document).on('focusout', function(){ 
     console.log('focusout!') 
    $('input').css("background-color", "yellow"); 
     $('input').blur(); 
    });

focusout nie dzwoni wewnątrz elementu iframe!

Moje pytanie brzmi **How to force close ipad/iphone keypad when input element is not focused using Javascript/Jquery?**

odpowiedzi zostaną nagrodzone jak podano!

Źródło

2015-05-05 UI_Dev

Pisałem brakujące wtyczki głównie do obsługi klawiatury. Obsługuje również ukrywanie klawiatury po kliknięciu na dokument - z wyłączeniem komponentów formularza, które nie powinny powodować ukrywania klawiatury. Sprawdź kod stąd (L: 70 - L: 92): https://github.com/zvona/Servant.js/blob/master/Servant.js – zvona

sprawdź i daj znać .. –

Mam nadzieję, że to rozwiąże twój problem, po prostu usuwa fokus na aktywnym elemencie.

użyciu JavaScript

document.activeElement.blur();

Korzystanie jQuery

$("#Clicked_button_id").click(function() { 
    $("#input_field_id").blur();        
});

Źródło

2015-05-05 09:39:27

wil check i daj nam znać .. –

to nie działa bro..przy pukaniu typu wejścia, zamyka klawiaturę przed wprowadzeniem dowolnych wartości –

Zobacz ..http: //jsfiddle.net/yaq3j9b9/ to jest to, co się dzieje .. zmniejszenie ostrości po dotknięciu –

Aby usunąć klawiaturę, musisz stracić nacisk na dane wejściowe.

document.activeElement.blur();

Za pomocą tej linii usuwa się fokus, a klawiatura znika.

W twoim przypadku istnieje możliwość dodania wydarzenia do twojego ciała i zatrzymania tego zdarzenia po kliknięciu wejścia.

$(document).ready(function() { 
 
    $('body').click(function() { 
 
    document.activeElement.blur(); 
 
    console.log("blur"); 
 
    }); 
 

 
    $('input').click(function (event) { 
 
    event.stopPropagation(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text"/>

Aktualizacja

Znalazłem answer dostać element aktywny w iframe.

/** 
* Return the active element in the main web or iframes 
* @return HTMLElement 
**/ 
function getActiveElement() { 
    var focused = false; 

    // Check if the active element is in the main web or no 
    if (document.body === document.activeElement || 
    document.activeElement instanceof HTMLIFrameElement) { 

    // Search in iframes 
    $('iframe').each(function() { 
     var element = this.contentWindow.document.activeElement; 
     // If there is a active element 
     if (element !== this.contentWindow.document.body) { 
     focused = element; 
     return false; // Stop searching 
     } 
    }); 

    } else focused = document.activeElement; 

    return focused; // Return element 
}

Dzięki tej funkcji można uzyskać aktywny element w dokumencie lub w elemencie iframe.

Po tym, musisz usunąć fokus na tym elemencie, aby ukryć klawiaturę.

getActiveElement().blur();

Źródło

2015-05-05 09:39:27 R3tep

wil sprawdzić i daj mi znać .. –

Próbowałem kod ur, Po kliknięciu pola wprowadzania, znika z klawiatury i coudn't focus –

Twój wkład w iframe? – R3tep

Spróbuj tego. Wykrywa, kiedy wstawiasz element, ale dane wejściowe, a następnie rozmywa.

$("html").children().not("#input_field_id").click(function(){ 
 
    $("#input_field_id").blur(); 
 
});

Źródło

2015-06-15 11:58:08

I może ewentualnie mieć rozwiązanie problemu na iOS. Moja konfiguracja to safari na iOS 8.3/5C.

Z moich eksperymentów wydaje mi się, że element ciała w Safari/iOS nie jest otwarty na żadne kliknięcia. Nie jestem w stanie wyjaśnić, dlaczego tak się wydaje.

Więc, co zrobiłem to: umieść opakowanie wewnątrz ciała i pozwól mu otrzymać kliknięcie.

Main.html

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>keyboard hide issue</title> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<script> 
    $(document).ready(function() { 
     //!SOLUTION 
     $('#body-wrapper').click(function(e) { 
      console.log('I got clicked'); 
     });   
    }); 
</script> 
<style> 
/* ignore this. Its just styles. ... */ 
div#body-wrapper { 
    height: 200px; 
    width: 100%; 
    background-color: red; 
} 
input { 
    margin: 10px; 
} 

</style> 
</head> 
<body> 
    <div id="body-wrapper"> 
     <input type="text" id="main-input1"/> 
     <input type="number" id="main-input2"/> 
     <input type="email" id="main-input3"/> 
    </div> 
    <iframe src="blur.html"></iframe> 
</body> 
</html>

blur.html

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Blur iFrame</title> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     //!SOLUTION 
     $('#wrapper').click(function(e) { 
      //do nothing 
     });   
    }); 
</script> 
<style> 
/* ignore this. Its just styles. ... */ 
div#wrapper { 
    height: 100px; 
    width: 100%; 
    background-color: yellow; 
} 
</style> 
</head> 
<body> 
    <div id="wrapper"> 
     <input type="number" pattern="[0-9]*" id="main-input"/> 
    </div> 
    </body> 
</html>

W obu plikach jestem w stanie ukryć klawiaturę dobrze. Ponownie, nie znam przyczyny, ale daj mi znać, jeśli nie jesteś w stanie powtórzyć rozwiązania.

Nie próbowałem go na iPadzie. Dzięki ...

Źródło

2015-06-16 12:54:47 82Tuskers

Nie działa. Wydaje się, że być problemem z ramką iframe i nie można go naprawić. Naprawiono go przez odczytanie kodu i wykonanie jakiegoś ataku hakerskiego –

html docelowy <input> i <textarea>, iPhone i iPad nie ukryją klawiatury podczas nagrywania na pustym obszarze, ale Android będzie! musimy ukryć klawiaturę ręcznie - oznacza to ustawienie rozmycia wejścia;

tutaj Gose kod

$(function(){ 

    var cacheInput = null; 
    var timer = null; 
    if(!isApple()){ 
     return false; 
    } 
    $(document).on('focus','input',function(e){ 
     cacheInput = e.target; 
    }) 
    $(document).on('focus','textarea',function(e){ 
     cacheInput = e.target; 
    }) 
    $(document).on('touchend',function(e){ 
     if(e.target.tagName!=='INPUT'&&e.target.tagName!=='TEXTAREA'){ 
      if(cacheInput!==null){ 
       timer = setTimeout(function(){ 
        cacheInput.blur(); 
        clearTimeout(timer); 
       },300) 
      } 
     } 
    }) 
    function isApple(){ 
     var ua = navigator.userAgent.toUpperCase(); 
     var 
      ipad = ua.indexOf('IPAD')>-1, 
      ipod = ua.indexOf('IPOD')>-1, 
      iphone = ua.indexOf('IPHONE')>-1 ; 
     return ipad || ipod || iphone ; 
    } 
})

github: https://github.com/wikieswan/iphone-input-blur

demo: http://wikieswan.github.io/iphone-input-blur

Źródło

2016-01-22 10:16:53 wikieswan

Cóż ... Możesz dać mi tę nagrodę Bo właśnie rozwiązał ten problem za pomocą bardzo Rozwiązanie PROPLE.

Krok 1 : Sprawdź, czy wejście jest aktualnie ostre. Wyjaśnię później, dlaczego musimy dodać opóźnienie w zmianie wartości zmiennej inputFocused.

var inputFocused = false; 
$('input').focus(function(){ 
     setTimeout(function(){ 
      inputFocused = true; 
     },100); 
    });

Krok 2: Dodaj detektor zdarzenia, gdy ekran lub $(window) spuszcza lub kliknięciu. Jeśli okno zostało kliknięte lub kliknięte, sprawdź, czy wejście jest aktualnie ostre.Jeśli musisz ustawić oknotrue na okno $(window).focus(), funkcja blur() będzie działać! więc teraz możesz odogniskować element wejściowy, a klawiatura automatycznie ukryje się, a następnie ponownie ustaw zmienną na .

$(window).click(function(){ if(inputFocused == true){ $(window).focus(); var input = $('input'); input.blur(); inputFocused = false; } });`

setTimeout wyjaśnienie: Impreza $(window).click() wywoła jeśli kran użytkownika lub kliknąć w dowolnym miejscu na ekranie (np Kliknij przycisk, kliknij Wejście kranu lub kliknij ekran itp). Jeśli dotkniesz wejścia, jednocześnie ustawiając zdarzenie inputFocused na prawdziwe, wtedy sprawdź, czy inputFocused jest true następnie uruchomi kod, który ukrywa wirtualną klawiaturę. Oznacza to, że za każdym razem, gdy ustawisz pole wprowadzania danych, klawiatura się ukryje, a to będzie problem.

Dlatego dodajemy opóźnienie, aby kod wewnątrz if(inputFocused == true) nie działał, gdy ustawiamy pole wprowadzania i będzie on działał tylko wtedy, gdy pole wejściowe jest aktualnie ustawione na ostrość.

SPRAWDZONE I PRZETESTOWANE!

Źródło

2016-06-10 04:21:27 Vashtamyty

W aplikacji jonowej użyłem dyrektywy dotyczącej ciała, która przechwytuje dane wejściowe.

MyApp.directive('dismissIosKeyboardOnClick', function() { 
     return function (scope, element, attrs) { 
      if (cordova.platformId=="ios") { 
      element.on("touchstart", function(e) { 
       var keyboardDoms = new Set(["INPUT","TEXTAREA","SELECT"]); 
       if(keyboardDoms.has(document.activeElement.nodeName) && 
        !keyboardDoms.has(e.target.nodeName)) 
       document.activeElement.blur(); 
       }); 
      } 
     }; 
     });

Index.html

<body ... dismiss-ios-keyboard-on-click></body>

Źródło

2016-09-02 23:57:49 jrobichaud

iphone klawiatura nie ukrywając, gdy dotykając ekranu

Odpowiedz

Powiązane problemy