iPad Web App: ตรวจจับแป้นพิมพ์เสมือนจริงโดยใช้ JavaScript ใน Safari?

ฉันกำลังเขียนเว็บแอปสำหรับ iPad ( ไม่ใช่แอพ App Store ปกติ - มันเขียนด้วย HTML, CSS และ JavaScript) เนื่องจากแป้นพิมพ์เติมส่วนใหญ่ของหน้าจอมันจะทำให้การเปลี่ยนเค้าโครงของแอพให้พอดีกับพื้นที่ที่เหลือเมื่อแสดงแป้นพิมพ์ อย่างไรก็ตามฉันไม่พบวิธีการตรวจสอบว่ามีการแสดงแป้นพิมพ์หรือไม่

ความคิดแรกของฉันคือการสมมติว่าแป้นพิมพ์สามารถมองเห็นได้เมื่อฟิลด์ข้อความมีโฟกัส อย่างไรก็ตามเมื่อต่อแป้นพิมพ์ภายนอกเข้ากับ iPad แป้นพิมพ์เสมือนจริงจะไม่ปรากฏขึ้นเมื่อช่องข้อความได้รับโฟกัส

ในการทดลองของฉันแป้นพิมพ์ไม่ได้ส่งผลกระทบต่อความสูงหรือความสูงขององค์ประกอบ DOM ใด ๆ และฉันไม่พบเหตุการณ์หรือคุณสมบัติที่เป็นกรรมสิทธิ์ซึ่งระบุว่าแป้นพิมพ์สามารถมองเห็นได้

ฉันพบวิธีแก้ปัญหาที่ใช้งานได้แม้ว่ามันจะค่อนข้างน่าเกลียดก็ตาม มันยังใช้งานไม่ได้ในทุกสถานการณ์ แต่ใช้งานได้สำหรับฉัน เนื่องจากฉันปรับขนาดส่วนต่อประสานผู้ใช้กับขนาดหน้าต่างของ iPad ผู้ใช้จึงไม่สามารถเลื่อนได้ กล่าวอีกนัยหนึ่งถ้าฉันตั้ง scrollTop ของหน้าต่างมันจะยังคงอยู่ที่ 0

หากในทางกลับกันแป้นพิมพ์จะปรากฏขึ้น ดังนั้นฉันสามารถตั้งค่า scrollTop ทดสอบค่าของมันทันทีแล้วรีเซ็ต นี่คือวิธีที่อาจมีรหัสในการใช้ jQuery:

$(document).ready(function(){
    $('input').bind('focus',function() {
        $(window).scrollTop(10);
        var keyboard_shown = $(window).scrollTop() > 0;
        $(window).scrollTop(0);

        $('#test').append(keyboard_shown?'keyboard ':'nokeyboard ');
    });
});

โดยปกติคุณคาดหวังว่าสิ่งนี้จะไม่ปรากฏแก่ผู้ใช้ น่าเสียดายที่อย่างน้อยเมื่อทำงานใน Simulator เครื่อง iPad จะมองเห็น (แต่เร็ว ๆ ) จะเลื่อนขึ้นและลงอีกครั้ง ยังทำงานได้อย่างน้อยในบางสถานการณ์

ฉันทดสอบสิ่งนี้บน iPad และดูเหมือนว่าจะทำงานได้ดี

คุณสามารถใช้เหตุการณ์focusoutเพื่อตรวจสอบการเลิกคีย์บอร์ด มันเหมือนพร่ามัว แต่เป็นฟอง มันจะทำงานเมื่อแป้นพิมพ์ปิด (แต่ในกรณีอื่น ๆ เช่นกัน) ใน Safari และ Chrome เหตุการณ์สามารถลงทะเบียนได้ด้วย addEventListener ไม่ใช่ด้วยวิธีดั้งเดิม นี่คือตัวอย่างที่ฉันใช้ในการกู้คืนแอพ Phonegap หลังจากการถอดคีย์บอร์ด

 document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});

หากไม่มีส่วนย่อยนี้คอนเทนเนอร์ของแอปจะอยู่ในตำแหน่งที่เลื่อนขึ้นจนกระทั่งรีเฟรชหน้า

อาจเป็นทางออกที่ดีกว่าเล็กน้อยคือการผูก (กับ jQuery ในกรณีของฉัน) เหตุการณ์ "เบลอ" ในฟิลด์อินพุตต่างๆ

เนื่องจากเมื่อแป้นพิมพ์หายไปเขตข้อมูลฟอร์มทั้งหมดจะเบลอ ดังนั้นสำหรับสถานการณ์ของฉันสิ่งนี้ถูกแก้ไขแล้ว

$('input, textarea').bind('blur', function(e) {

       // Keyboard disappeared
       window.scrollTo(0, 1);

});

หวังว่ามันจะช่วย Michele

หากมีแป้นพิมพ์บนหน้าจอการมุ่งเน้นช่องข้อความที่อยู่ใกล้ด้านล่างของวิวพอร์ตจะทำให้ Safari เลื่อนช่องข้อความไปยังมุมมอง อาจมีวิธีที่จะใช้ประโยชน์จากปรากฏการณ์นี้เพื่อตรวจสอบการปรากฏตัวของแป้นพิมพ์ (มีช่องข้อความเล็ก ๆ ที่ด้านล่างของหน้าซึ่งได้รับการมุ่งเน้นชั่วขณะหรือสิ่งที่ชอบ)

ในระหว่างเหตุการณ์โฟกัสคุณสามารถเลื่อนผ่านความสูงของเอกสารและอย่างน่าอัศจรรย์ window.innerHeight จะลดลงตามความสูงของคีย์บอร์ดเสมือน โปรดทราบว่าขนาดของแป้นพิมพ์เสมือนนั้นแตกต่างกันสำหรับแนวนอนและแนวตั้งดังนั้นคุณจะต้องทำการตรวจสอบใหม่เมื่อมีการเปลี่ยนแปลง ฉันจะแนะนำไม่ให้จดจำค่าเหล่านี้เนื่องจากผู้ใช้สามารถเชื่อมต่อ / ยกเลิกการเชื่อมต่อคีย์บอร์ดบลูทู ธ ได้ตลอดเวลา

var element = document.getElementById("element"); // the input field
var focused = false;

var virtualKeyboardHeight = function () {
    var sx = document.body.scrollLeft, sy = document.body.scrollTop;
    var naturalHeight = window.innerHeight;
    window.scrollTo(sx, document.body.scrollHeight);
    var keyboardHeight = naturalHeight - window.innerHeight;
    window.scrollTo(sx, sy);
    return keyboardHeight;
};

element.onfocus = function () {
    focused = true;
    setTimeout(function() { 
        element.value = "keyboardHeight = " + virtualKeyboardHeight() 
    }, 1); // to allow for orientation scrolling
};

window.onresize = function () {
    if (focused) {
        element.value = "keyboardHeight = " + virtualKeyboardHeight();
    }
};

element.onblur = function () {
    focused = false;
};

โปรดทราบว่าเมื่อผู้ใช้ใช้แป้นพิมพ์บลูทู ธ keyboardHeight คือ 44 ซึ่งเป็นความสูงของแถบเครื่องมือ [ก่อนหน้า] [ถัดไป]

มีการสั่นไหวเล็กน้อยเมื่อคุณทำการตรวจจับนี้ แต่ดูเหมือนว่าเป็นไปไม่ได้ที่จะหลีกเลี่ยง

แก้ไข: เอกสารโดย Apple แม้ว่าฉันจะไม่สามารถใช้งานได้จริง: WKWebView พฤติกรรมด้วยการแสดงคีย์บอร์ด : "ใน iOS 10 วัตถุ WKWebView ตรงกับพฤติกรรมดั้งเดิมของ Safari โดยอัปเดตคุณสมบัติ window.innerHeight เมื่อแสดงแป้นพิมพ์และไม่โทร ปรับขนาดกิจกรรม "(อาจใช้โฟกัสหรือโฟกัสรวมถึงความล่าช้าในการตรวจจับแป้นพิมพ์แทนที่จะใช้ปรับขนาด)

แก้ไข: รหัสถือว่าแป้นพิมพ์บนหน้าจอไม่ใช่แป้นพิมพ์ภายนอก ออกจากเนื่องจากข้อมูลอาจเป็นประโยชน์กับผู้อื่นที่สนใจเฉพาะแป้นพิมพ์บนหน้าจอเท่านั้น ใช้http://jsbin.com/AbimiQup/4เพื่อดูพารามิเตอร์หน้า

เราทดสอบเพื่อดูว่าdocument.activeElementเป็นองค์ประกอบที่แสดงแป้นพิมพ์ (input type = text, textarea ฯลฯ )

รหัสต่อไปนี้ทำให้สิ่งต่าง ๆ เป็นไปตามวัตถุประสงค์ของเรา (แม้ว่าโดยทั่วไปจะไม่ถูกต้อง)

function getViewport() {
    if (window.visualViewport && /Android/.test(navigator.userAgent)) {
        // https://developers.google.com/web/updates/2017/09/visual-viewport-api    Note on desktop Chrome the viewport subtracts scrollbar widths so is not same as window.innerWidth/innerHeight
        return {
            left: visualViewport.pageLeft,
            top: visualViewport.pageTop,
            width: visualViewport.width,
            height: visualViewport.height
        };
    }
    var viewport = {
            left: window.pageXOffset,   // http://www.quirksmode.org/mobile/tableViewport.html
            top: window.pageYOffset,
            width: window.innerWidth || documentElement.clientWidth,
            height: window.innerHeight || documentElement.clientHeight
    };
    if (/iPod|iPhone|iPad/.test(navigator.platform) && isInput(document.activeElement)) {       // iOS *lies* about viewport size when keyboard is visible. See http://stackoverflow.com/questions/2593139/ipad-web-app-detect-virtual-keyboard-using-javascript-in-safari Input focus/blur can indicate, also scrollTop: 
        return {
            left: viewport.left,
            top: viewport.top,
            width: viewport.width,
            height: viewport.height * (viewport.height > viewport.width ? 0.66 : 0.45)  // Fudge factor to allow for keyboard on iPad
        };
    }
    return viewport;
}


function isInput(el) {
    var tagName = el && el.tagName && el.tagName.toLowerCase();
    return (tagName == 'input' && el.type != 'button' && el.type != 'radio' && el.type != 'checkbox') || (tagName == 'textarea');
};

รหัสข้างต้นเป็นค่าโดยประมาณเท่านั้น: เป็นความผิดพลาดสำหรับแป้นพิมพ์แยกแป้นพิมพ์ที่ไม่ได้ใส่แป้นพิมพ์แป้นพิมพ์จริง ตามความคิดเห็นที่ด้านบนคุณอาจทำงานได้ดีกว่ารหัสที่ระบุบน Safari (ตั้งแต่ iOS8?) หรือ WKWebView (ตั้งแต่ iOS10) โดยใช้window.innerHeightคุณสมบัติ

ฉันพบความล้มเหลวภายใต้สถานการณ์อื่น ๆ : เช่นให้ความสำคัญกับอินพุตจากนั้นไปที่หน้าจอหลักจากนั้นกลับมาที่หน้า; iPad ไม่ควรทำให้วิวพอร์ตเล็กลง เบราว์เซอร์ IE รุ่นเก่าจะไม่ทำงาน Opera ไม่ทำงานเพราะ Opera ยังคงให้ความสำคัญกับองค์ประกอบหลังจากปิดแป้นพิมพ์

อย่างไรก็ตามคำตอบที่ติดแท็ก (การเปลี่ยน scrolltop เพื่อวัดความสูง) มีผลข้างเคียง UI ที่น่ารังเกียจหากวิวพอร์ตซูมได้ (หรือเปิดใช้งานการบังคับซูมในการตั้งค่า) ฉันไม่ใช้วิธีแก้ปัญหาอื่นที่แนะนำ (เปลี่ยน scrolltop) เพราะใน iOS เมื่อวิวพอร์ตสามารถซูมได้และเลื่อนไปยังอินพุตที่โฟกัสมีการโต้ตอบแบบบั๊กระหว่างการเลื่อนและซูม & โฟกัส มองเห็นได้)

ผ่านการทดสอบบน Android 4.1.1 แล้วเท่านั้น:

เหตุการณ์เบลอไม่ใช่เหตุการณ์ที่น่าเชื่อถือในการทดสอบแป้นพิมพ์ขึ้นและลงเนื่องจากผู้ใช้เป็นตัวเลือกในการซ่อนแป้นพิมพ์อย่างชัดเจนซึ่งไม่เรียกใช้เหตุการณ์เบลอบนสนามที่ทำให้แป้นพิมพ์แสดง

ปรับขนาดเหตุการณ์ แต่ใช้งานได้อย่างมีเสน่ห์หากคีย์บอร์ดขึ้นหรือลงไม่ว่าด้วยเหตุผลใด

กาแฟ:

$(window).bind "resize", (event) ->  alert "resize"

ไฟจะทำงานเมื่อใดก็ตามที่มีการแสดงหรือซ่อนคีย์บอร์ดไม่ว่าด้วยเหตุผลใดก็ตาม

โปรดทราบว่าในกรณีของเบราว์เซอร์ Android (แทนที่จะเป็นแอพ) จะมีแถบ URL แบบหดได้ซึ่งไม่ปรับขนาดเมื่อมีการหดกลับ แต่จะเปลี่ยนขนาดหน้าต่างที่มีอยู่

แทนที่จะตรวจจับแป้นพิมพ์พยายามตรวจหาขนาดของหน้าต่าง

หากความสูงของหน้าต่างลดลงและความกว้างยังคงเท่าเดิมแสดงว่าคีย์บอร์ดเปิดอยู่ ไม่เช่นนั้นแป้นพิมพ์จะถูกปิดคุณยังสามารถเพิ่มเข้าไปในนั้นทดสอบว่าช่องอินพุตใดอยู่ในโฟกัสหรือไม่

ลองโค้ดนี้เป็นตัวอย่าง

var last_h = $(window).height(); //  store the intial height.
var last_w = $(window).width(); //  store the intial width.
var keyboard_is_on = false;
$(window).resize(function () {
    if ($("input").is(":focus")) {
        keyboard_is_on =
               ((last_w == $(window).width()) && (last_h > $(window).height()));
    }   
});     

วิธีนี้จะจำตำแหน่งการเลื่อน

    var currentscroll = 0;

    $('input').bind('focus',function() {
        currentscroll = $(window).scrollTop();
    });

    $('input').bind('blur',function() {
        if(currentscroll != $(window).scrollTop()){

        $(window).scrollTop(currentscroll);

        }
    });

ลองอันนี้:

var lastfoucsin;

$('.txtclassname').click(function(e)
{
  lastfoucsin=$(this);

//the virtual keyboard appears automatically

//Do your stuff;

});


//to check ipad virtual keyboard appearance. 
//First check last focus class and close the virtual keyboard.In second click it closes the wrapper & lable

$(".wrapperclass").click(function(e)
{

if(lastfoucsin.hasClass('txtclassname'))
{

lastfoucsin=$(this);//to avoid error

return;

}

//Do your stuff 
$(this).css('display','none');
});`enter code here`

ดังที่ระบุไว้ในคำตอบก่อนหน้าบางหน้าต่างตัวแปรความสูงได้รับการปรับปรุงอย่างถูกต้องตอนนี้บน iOS10เมื่อแป้นพิมพ์ปรากฏขึ้นและเนื่องจากฉันไม่ต้องการการสนับสนุนสำหรับรุ่นก่อนหน้านี้ฉันจึงมาพร้อมกับแฮ็คต่อไปนี้ "การแก้ปัญหา"

//keep track of the "expected" height
var windowExpectedSize = window.innerHeight;

//update expected height on orientation change
window.addEventListener('orientationchange', function(){
    //in case the virtual keyboard is open we close it first by removing focus from the input elements to get the proper "expected" size
    if (window.innerHeight != windowExpectedSize){
        $("input").blur();
        $("div[contentEditable]").blur();     //you might need to add more editables here or you can focus something else and blur it to be sure
        setTimeout(function(){
            windowExpectedSize = window.innerHeight;
        },100);
    }else{
        windowExpectedSize = window.innerHeight;
    }
});

//and update the "expected" height on screen resize - funny thing is that this is still not triggered on iOS when the keyboard appears
window.addEventListener('resize', function(){
    $("input").blur();  //as before you can add more blurs here or focus-blur something
    windowExpectedSize = window.innerHeight;
});

จากนั้นคุณสามารถใช้:

if (window.innerHeight != windowExpectedSize){ ... }

เพื่อตรวจสอบว่าแป้นพิมพ์สามารถมองเห็นได้ ฉันเคยใช้มาระยะหนึ่งแล้วในแอปพลิเคชันเว็บของฉันและใช้งานได้ดี แต่ (เนื่องจากโซลูชันอื่น ๆ ทั้งหมด) คุณอาจพบสถานการณ์ที่ล้มเหลวเนื่องจากขนาด "คาดว่า" ไม่ได้รับการอัปเดตอย่างเหมาะสมหรือบางอย่าง

ฉันทำการค้นหาบางอย่างและฉันไม่พบสิ่งที่เป็นรูปธรรมสำหรับ "บนแป้นพิมพ์ที่แสดง" หรือ "บนแป้นพิมพ์ที่ถูกไล่ออก" ดูรายชื่ออย่างเป็นทางการของเหตุการณ์ที่เกิดขึ้นได้รับการสนับสนุน ดูที่Technical Note TN2262สำหรับ iPad อย่างที่คุณอาจรู้อยู่แล้วว่ามีเหตุการณ์ร่างกายonorientationchangeคุณสามารถเดินสายเพื่อตรวจจับแนวนอน / แนวตั้ง

ในทำนองเดียวกัน แต่คุณเคยลองตรวจจับการปรับขนาดหรือไม่? การเปลี่ยนแปลงวิวพอร์ตอาจทำให้เกิดเหตุการณ์นั้นทางอ้อมจากคีย์บอร์ดที่แสดง / ซ่อน

window.addEventListener('resize', function() { alert(window.innerHeight); });

ซึ่งจะแจ้งเตือนความสูงใหม่ในเหตุการณ์ปรับขนาดใด ๆ ....

ฉันไม่ได้ลองทำสิ่งนี้ด้วยตัวเองมันเป็นแค่ความคิด ... แต่คุณลองใช้คำสั่งสื่อกับ CSS เพื่อดูว่าระดับความสูงของหน้าต่างเปลี่ยนไปหรือไม่จากนั้นเปลี่ยนการออกแบบสำหรับสิ่งนั้น ฉันนึกภาพว่า Safari mobile ไม่รู้จักแป้นพิมพ์เป็นส่วนหนึ่งของหน้าต่างเพื่อหวังว่าจะได้ผล

ตัวอย่าง:

@media all and (height: 200px){
    #content {height: 100px; overflow: hidden;}
}

ปัญหาคือว่าแม้ในปี 2014 อุปกรณ์จะจัดการกับการปรับขนาดหน้าจอเหตุการณ์เช่นเดียวกับการเลื่อนเหตุการณ์ที่ไม่สอดคล้องกันในขณะที่แป้นพิมพ์นุ่มเปิด

ฉันพบว่าแม้ว่าคุณจะใช้แป้นพิมพ์บลูทู ธ iOS โดยเฉพาะอย่างยิ่งก่อให้เกิดข้อผิดพลาดบางรูปแบบที่แปลก; ดังนั้นแทนที่จะตรวจพบแป้นพิมพ์อ่อนฉันเพิ่งต้องกำหนดเป้าหมายอุปกรณ์ที่แคบมากและมีหน้าจอสัมผัส

ฉันใช้เคียวรีสื่อบันทึก (หรือwindow.matchMedia ) สำหรับการตรวจจับความกว้างและModernizrสำหรับการตรวจจับเหตุการณ์แบบสัมผัส

อาจจะง่ายกว่าถ้ามีช่องทำเครื่องหมายในการตั้งค่าแอพของคุณซึ่งผู้ใช้สามารถสลับ

ในการพิมพ์ขนาดเล็กอธิบายให้ผู้ใช้ทราบว่าขณะนี้แป้นพิมพ์ภายนอกไม่สามารถตรวจพบได้ในเบราว์เซอร์ปัจจุบัน

คุณสามารถตรวจจับได้เมื่อกล่องป้อนข้อมูลของคุณมีโฟกัสและคุณทราบความสูงของแป้นพิมพ์ นอกจากนี้ยังมี CSS สำหรับวางแนวหน้าจอดังนั้นฉันคิดว่าคุณสามารถแฮ็คมันได้

แม้ว่าคุณจะต้องการจัดการกับกรณีของแป้นพิมพ์จริงก็ตาม