मोबाइल वेब एप्लिकेशन के लिए jquery में कीबोर्ड शो/छुपाएं ईवेंट का पता लगाने के लिए

Question

मैं वेब बेस मोबाइल (एचटीएमएल) एप्लिकेशन पर काम कर रहा हूं। क्या
पर कोई भी तरीका कीबोर्ड कुंजीपटल का पता लगाने जैसे कुंजीपटल दिखाई देता है और कीबोर्ड छुपाता है, आधार उस पर मैं अन्य स्क्रीन लेआउट को नियंत्रित कर सकता हूं। मैंने फोकस, ब्लर, ब्राउज़र का आकार बदलने की कोशिश की लेकिन मेरी समस्या ने 100% का समाधान नहीं किया है, इसलिए मैं हूँ केवल कीबोर्ड ईवेंट की तलाश में हूं, वास्तव में कीबोर्ड पर दिखाई देने पर कीबोर्ड पर पाद लेख छिपाना चाहता है क्योंकि यह (पाद लेख) दिखाई देता है कुंजीपटल, इसलिए जब मैं कीबोर्ड छुपाता हूं तो के रूप में कीबोर्ड दृश्यमान और पाद लेख स्थिति के रूप में पाद लेख स्थिति को सेट करने का प्रयास कर रहा हूं। मैंने इसे नीचे काम करने की कोशिश की लेकिन यह मेरी समस्या के
का 100% संकल्प नहीं हो सका। $ (document) .ready (function() {

$("input").focus(function() { 
$(".copyright_link").css("position","relative"); 

});  

$("input").blur(function() { 

$(".copyright_link").css("position","fixed"); 
});  

});

किसी को भी कैसे पाद समस्या को हल करने या मुझे पता है मेरी मदद कर सकते अगर वहाँ jQuery में कुंजीपटल घटना है

Answer 1

यदि कुंजीपटल प्रदर्शित होने या नहीं

$(document).ready(function(){ 
    var _originalSize = $(window).width() + $(window).height() 
    $(window).resize(function(){ 
    if($(window).width() + $(window).height() != _originalSize){ 
     console.log("keyboard show up"); 
     $(".copyright_link").css("position","relative"); 
    }else{ 
     console.log("keyboard closed"); 
     $(".copyright_link").css("position","fixed"); 
    } 
    }); 
}); 

Answer 2

if($(document.activeElement).attr('type') == "text"){ 
    console.log("Keyboard is visible"); 
}else{ 
    console.log("Keyboard is not visible"); 
} 

है आप घटना का आकार बदलने के प्राप्त करने के लिए उपयोग कर सकते हैं

Answer 3

jQuery का उपयोग करना:

var lastWindowWidth = $(window).width(), 
    lastWindowHeight = $(window).height(); 

$(window).resize(function() { 

    var newWindowWidth = $(window).width(), 
     newWindowHeight = $(window).height(); 

    if(newWindowHeight > lastWindowHeight && newWindowWidth == lastWindowWidth) { 

     // Keyboard closed 
     // ... 

    } 

    lastWindowWidth = newWindowWidth; 
    lastWindowHeight = newWindowHeight; 

}); 

ध्यान दें कि खिड़की resiz ई इवेंट (और इस तरह "कीबोर्ड बंद" टिप्पणी ब्लॉक) कुंजीपटल एनिमेट बंद होने के रूप में कई बार बुलाया जा सकता है। अपनी जरूरतों के अनुरूप संपादित करें।

Answer 4

हाय यहाँ एक समाधान है जो यह जांचने के लिए काम करता है कि मोबाइल डिवाइस में कीबोर्ड सक्रिय है या नहीं।

नीचे दिए गए कोड में "# ईमेल" इनपुट क्षेत्र का आईडी है जिसका मैं उपयोग कर रहा हूं।

$(window).resize(function() { //checking for window resize event 

    if($(window).width() < 414){ //checking for window width 
     if($("#Email").is(":focus")){ 
      $('.content').css({'margin-top': -15 + 'px'}); 
      $('.footer').css({'margin-bottom': -100 + 'px'}); 
     } 
    }}); 

Answer 5

सबसे गोली प्रोफेसर समाधान है कि क्रोम/सफारी आदि में काम करता है .. और 20 Nov-2017 के रूप में Android और iOS दोनों पर एक VH है कि एक div की ऊंचाई में एक परिवर्तन का पता लगाने के लिए किया जाएगा ऊंचाई इकाइयों (व्यूपोर्ट ऊंचाई)

फिर इनपुट/टेक्स्टरेरा के किसी भी धुंध/फोकस परिवर्तन पर जांच करें कि क्या उस div में अब 30% कम (पिक्सेल में) की ऊंचाई है जो उस धुंध/फोकस ईवेंट से पहले होती है।

यहाँ कोड देखें: Detect virtual keyboard vs. hardware keyboard (अपनी नहीं जाहिरा तौर पर पेस्ट कोड को कॉपी करने की अनुमति दी) `$ (document.activeElement) .attr ('प्रकार') के साथ