iphone Tastatur versteckt nicht, wenn auf den Bildschirm tippen

ich ein Eingabefeldiphone Tastatur versteckt nicht, wenn auf den Bildschirm tippen

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

Im normalen Browser mit Nummerntyp haben, ich bin ein paar Zahlen eingeben, und ich bin auf den Bildschirm tippen, versteckt es iphone/ipad Tastatur .

Aber das funktioniert nicht, wenn es innerhalb iframe ist. Wir müssen explizit auf "Fertig" klicken. Dieses Problem ist nur für iphone/ipad

Dies ist ein Iframe-Problem. Jede Reparatur mit Javascript/Jquery würde sehr geschätzt werden.

Aktualisiert

Versuchte

document.activeElement.blur();

und focusOut, wenn ein Ereignis in Javascript ausgelöst. keine von ihnen funktioniert.

$(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 ruft nicht innerhalb iframe!

Meine Frage ist **How to force close ipad/iphone keypad when input element is not focused using Javascript/Jquery?**

Antworten werden wie angegeben werden belohnt!

Quelle

2015-05-05 UI_Dev

ich in erster Linie ein kleines Plugin geschrieben habe für Tastatur Handhabung. Es unterstützt auch das Ausblenden der Tastatur beim Klicken auf das Dokument - ausgenommen Formularkomponenten, die das Ausblenden der Tastatur nicht auslösen sollten. Check-Code von hier (L: 70 - L: 92): https://github.com/zvona/Servant.js/blob/master/Servant.js – zvona

wil überprüfen und lassen Sie wissen .. –

Hoffe, dies wird Ihr Problem lösen, es entfernt einfach den Fokus auf aktive Element.

Mit Javascript

document.activeElement.blur();

Mit jQuery

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

Quelle

2015-05-05 09:39:27

wil überprüfen und lass es uns wissen .. –

dies funktioniert nicht bro..when ich tippen Eingabe-Typ, es schließt die Tastatur vor der Eingabe von Werten –

Siehe .. http://jsfiddle.net/yaq3j9b9/ Dies ist, was passiert .. Verlust Fokus Wenn Sie tippen –

Um die Tastatur zu entfernen, müssen Sie den Fokus auf Ihre Eingabe verlieren.

document.activeElement.blur();

Mit dieser Zeile entfernen Sie den Fokus und die Tastatur verschwindet.

In Ihrem Fall ist es möglich, ein Ereignis in Ihrem Körper hinzuzufügen und dieses Ereignis zu stoppen, wenn Sie auf eine Eingabe klicken.

$(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"/>

aktualisieren

fand ich dieses answer ein aktives Element in einem Iframe zu bekommen.

/** 
* 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 
}

Mit dieser Funktion können Sie das aktive Element auf dem Dokument oder in einem iframe erhalten.

Danach müssen Sie den Fokus auf dieses Element entfernen, um die Tastatur auszublenden.

Quelle

2015-05-05 09:39:27 R3tep

wil überprüfen und lassen Sie es wissen .. –

Ich versuchte ur code, Wenn ich auf das Eingabefeld klicken, verschwindet es die Tastatur und coudnot nicht –

Ihre Eingabe ist in einem iframe? – R3tep

Versuchen Sie es. Dies erkennt, wenn Sie irgendein Element außer der Eingabe ablegen und verwischen.

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

Quelle

2015-06-15 11:58:08

Ich könnte möglicherweise eine Lösung für Ihr Problem auf iOS haben. Meine Konfiguration ist Safari auf iOS 8.3/5C.

Aus meinen Experimenten scheint mir, dass body-Element in Safari/iOS für keine Klickereignisse empfänglich ist. Ich kann nicht erklären warum, aber es scheint so.

Also, was ich getan habe, ist: Legen Sie eine Wrapper div nur in Körper und erlauben Sie es, den Klick zu erhalten.

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>

In beiden Dateien, die ich bin in der Lage, die Tastatur zu verstecken gut. Auch hier kenne ich den Grund nicht, aber lassen Sie es mich wissen, wenn Sie die Lösung nicht replizieren können.

Ich habe es nicht auf einem iPad ausprobiert. Danke ...

Quelle

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

Funktioniert nicht. Dies scheint Es ist ein Iframe-Problem und kann nicht behoben werden.Er wurde behoben, indem man Charcode liest und etwas hackt –

html Ziel <input> und <textarea>, iPhone und iPad wird Tastatur nicht beim Tapen auf leeren Bereich verstecken, aber Android wird! wir müssen die Tastatur von Hand verstecken - das bedeutet, dass die Eingabefokatur eingestellt wird;

hier Gose den Code

$(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

Quelle

2016-01-22 10:16:53 wikieswan

Nun ... Sie können mir geben, dass die Belohnung, weil ich dieses Problem nur gelöst mit einem sehr SIMPLE Lösung.

Schritt 1 : Überprüfen Sie, ob der Eingang zur Zeit im Fokus ist. Ich werde später erklären, warum wir eine Verzögerung hinzufügen müssen, um den Wert von inputFocused Variable zu ändern.

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

Schritt 2: ein Ereignis-Listener hinzufügen, wenn der Bildschirm oder $(window) angezapft oder angeklickt wird. Wenn das Fenster angetippt oder angeklickt wurde, prüfen Sie, ob der Eingang gerade scharf eingestellt ist.Wenn true müssen Sie das Fenster $(window).focus() konzentrieren, nach der Fokussierung des Fensters, blur() Funktion wird jetzt funktionieren! Sie können nun das Eingabeelement nicht fokussieren, dann wird die Tastatur automatisch ausgeblendet und die Variable inputFocused erneut auf false gesetzt.

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

SetTimeout Erklärung: Die $(window).click() Ereignis ausgelöst wird, wenn der Benutzer tippen oder auf eine beliebige Stelle auf dem Bildschirm (z Schaltfläche klicken, Eingabe klicken, tippen oder klicken Sie auf Bildschirm, etc). Wenn Sie auf den Eingang tippen und gleichzeitig inputFocused auf true setzen, wird das Ereignis $(window).click() ausgelöst, dann wird geprüft, ob inputFocusedtrue ist, dann wird der Code ausgeführt, der die virtuelle Tastatur verdeckt. Das bedeutet, dass die Tastatur sich immer dann versteckt, wenn Sie ein Eingabefeld fokussieren. Das ist ein Problem.

Deshalb fügen wir eine Verzögerung hinzu, so dass der Code innerhalb if(inputFocused == true) nicht ausgeführt wird, während wir das Eingabefeld fokussieren, und es wird nur ausgeführt, wenn das Eingabefeld gerade im Fokus ist.

VERSUCHT UND GEPRÜFT!

Quelle

2016-06-10 04:21:27 Vashtamyty

in einer ionischen Anwendung verwenden ich eine Richtlinie auf dem Körper, die die Eingaben ab.

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>

Quelle

2016-09-02 23:57:49 jrobichaud

iphone Tastatur versteckt nicht, wenn auf den Bildschirm tippen

Antwort

Verwandte Themen