Ứng dụng web iPad: Phát hiện bàn phím ảo bằng JavaScript trong Safari?

Tôi đang viết một ứng dụng web cho iPad ( không phải là ứng dụng App Store thông thường - nó được viết bằng HTML, CSS và JavaScript). Vì bàn phím lấp đầy một phần lớn của màn hình, nên thay đổi bố cục của ứng dụng để phù hợp với không gian còn lại khi bàn phím được hiển thị. Tuy nhiên, tôi đã không tìm thấy cách nào để phát hiện khi nào hoặc liệu bàn phím được hiển thị.

Ý tưởng đầu tiên của tôi là giả định rằng bàn phím có thể nhìn thấy khi một trường văn bản có tiêu điểm. Tuy nhiên, khi bàn phím ngoài được gắn vào iPad, bàn phím ảo sẽ không hiển thị khi trường văn bản nhận được tiêu điểm.

Trong các thử nghiệm của tôi, bàn phím cũng không ảnh hưởng đến chiều cao hoặc chiều cao của bất kỳ thành phần DOM nào và tôi không tìm thấy sự kiện hay thuộc tính độc quyền nào cho biết bàn phím có hiển thị hay không.

Tôi tìm thấy một giải pháp hiệu quả, mặc dù nó hơi xấu. Nó cũng sẽ không hoạt động trong mọi tình huống, nhưng nó hoạt động với tôi. Vì tôi điều chỉnh kích thước giao diện người dùng với kích thước cửa sổ của iPad, nên người dùng thường không thể cuộn. Nói cách khác, nếu tôi đặt scrollTop của cửa sổ, nó sẽ giữ ở mức 0.

Mặt khác, nếu bàn phím được hiển thị, cuộn đột ngột hoạt động. Vì vậy, tôi có thể đặt scrollTop, ngay lập tức kiểm tra giá trị của nó và sau đó đặt lại. Đây là cách nó có thể tìm trong mã, sử dụng 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 ');
    });
});

Thông thường, bạn sẽ mong đợi điều này sẽ không hiển thị cho người dùng. Thật không may, ít nhất là khi chạy trong Trình mô phỏng, iPad rõ ràng (mặc dù nhanh chóng) cuộn lên xuống một lần nữa. Tuy nhiên, nó hoạt động, ít nhất là trong một số tình huống cụ thể.

Tôi đã thử nghiệm điều này trên iPad và có vẻ như nó hoạt động tốt.

Bạn có thể sử dụng sự kiện tập trung để phát hiện sự từ chối bàn phím. Nó giống như mờ, nhưng bong bóng. Nó sẽ kích hoạt khi bàn phím đóng lại (nhưng cũng có thể trong các trường hợp khác). Trong Safari và Chrome, sự kiện chỉ có thể được đăng ký với addEventListener, không phải bằng các phương thức cũ. Dưới đây là một ví dụ tôi đã sử dụng để khôi phục ứng dụng Phonegap sau khi loại bỏ bàn phím.

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

Không có đoạn mã này, vùng chứa ứng dụng sẽ ở vị trí cuộn lên cho đến khi làm mới trang.

có lẽ một giải pháp tốt hơn một chút là liên kết (với jQuery trong trường hợp của tôi) sự kiện "làm mờ" trên các trường đầu vào khác nhau.

Điều này bởi vì khi bàn phím biến mất, tất cả các trường mẫu bị mờ. Vì vậy, đối với tình huống của tôi, snipped này đã giải quyết vấn đề.

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

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

});

hy vọng nó giúp. Michele

Nếu có bàn phím trên màn hình, việc tập trung vào trường văn bản ở gần cuối khung nhìn sẽ khiến Safari cuộn trường văn bản vào chế độ xem. Có thể có một số cách để khai thác hiện tượng này để phát hiện sự hiện diện của bàn phím (có một trường văn bản nhỏ ở cuối trang để lấy nét ngay lập tức hoặc một cái gì đó tương tự).

Trong sự kiện lấy nét, bạn có thể cuộn qua chiều cao tài liệu và kỳ diệu là window.innerHeight được giảm theo chiều cao của bàn phím ảo. Lưu ý rằng kích thước của bàn phím ảo là khác nhau đối với hướng ngang so với hướng dọc, do đó bạn sẽ cần phải phát hiện lại khi thay đổi. Tôi sẽ khuyên bạn không nên nhớ các giá trị này vì người dùng có thể kết nối / ngắt kết nối bàn phím bluetooth bất cứ lúc nào.

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;
};

Lưu ý rằng khi người dùng đang sử dụng bàn phím bluetooth, bàn phímHeight là 44, chiều cao của thanh công cụ [trước] [tiếp theo].

Có một chút nhấp nháy khi bạn thực hiện phát hiện này, nhưng dường như không thể tránh được.

Chỉnh sửa: Tài liệu của Apple mặc dù tôi thực sự không thể làm cho nó hoạt động: WKWebView Hành vi với bàn phím Hiển thị : "Trong iOS 10, các đối tượng WKWebView khớp với hành vi gốc của Safari bằng cách cập nhật thuộc tính window.innerHeight khi bàn phím được hiển thị và không gọi thay đổi kích thước sự kiện "(có lẽ có thể sử dụng tiêu điểm hoặc tiêu điểm cộng với độ trễ để phát hiện bàn phím thay vì sử dụng thay đổi kích thước).

Chỉnh sửa: mã giả định bàn phím trên màn hình, không phải bàn phím ngoài. Rời khỏi nó vì thông tin có thể hữu ích cho những người khác chỉ quan tâm đến bàn phím trên màn hình. Sử dụng http://jsbin.com/AbimiQup/4 để xem thông số trang.

Chúng tôi kiểm tra xem liệu document.activeElementphần tử có hiển thị bàn phím không (kiểu nhập = văn bản, textarea, v.v.).

Đoạn mã sau làm mờ đi mọi thứ cho mục đích của chúng tôi (mặc dù nói chung không chính xác).

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');
};

Đoạn mã trên chỉ là gần đúng: Đó là sai đối với bàn phím tách, bàn phím không khóa, bàn phím vật lý. Theo nhận xét ở đầu, bạn có thể thực hiện công việc tốt hơn mã đã cho trên Safari (kể từ iOS8?) Hoặc WKWebView (kể từ iOS10) bằng cách sử dụng thuộc window.innerHeighttính.

Tôi đã tìm thấy thất bại trong các trường hợp khác: ví dụ: tập trung vào đầu vào, sau đó vào màn hình chính rồi quay lại trang; iPad không nên làm cho khung nhìn nhỏ hơn; Các trình duyệt IE cũ sẽ không hoạt động, Opera không hoạt động vì Opera tiếp tục tập trung vào phần tử sau khi đóng bàn phím.

Tuy nhiên, câu trả lời được gắn thẻ (thay đổi cuộn để đo chiều cao) có tác dụng phụ UI khó chịu nếu chế độ xem có thể phóng to (hoặc thu phóng lực trong tùy chọn). Tôi không sử dụng giải pháp được đề xuất khác (thay đổi cuộn) vì trên iOS, khi chế độ xem có thể phóng to và cuộn sang đầu vào tập trung, có các tương tác lỗi giữa cuộn & thu phóng & lấy nét (có thể để đầu vào chỉ tập trung bên ngoài chế độ xem - không có thể nhìn thấy).

Chỉ được thử nghiệm trên Android 4.1.1:

sự kiện làm mờ không phải là một sự kiện đáng tin cậy để kiểm tra bàn phím lên xuống vì người dùng là tùy chọn ẩn rõ ràng bàn phím không kích hoạt sự kiện mờ trên trường khiến bàn phím hiển thị.

Thay đổi kích thước sự kiện tuy nhiên hoạt động như một bùa mê nếu bàn phím lên hoặc xuống vì bất kỳ lý do nào.

cà phê:

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

cháy bất cứ lúc nào bàn phím được hiển thị hoặc ẩn vì bất kỳ lý do.

Tuy nhiên, xin lưu ý trong trường hợp trình duyệt Android (chứ không phải ứng dụng) có một thanh url có thể thu vào, không kích hoạt thay đổi kích thước khi được rút lại nhưng không thay đổi kích thước cửa sổ có sẵn.

Thay vì phát hiện bàn phím, hãy thử phát hiện kích thước của cửa sổ

Nếu chiều cao của cửa sổ bị giảm và chiều rộng vẫn như cũ, điều đó có nghĩa là bàn phím đang bật. Khác, bàn phím tắt, bạn cũng có thể thêm vào đó, kiểm tra xem có bất kỳ trường nhập liệu nào được lấy nét hay không.

Hãy thử mã này chẳng hạn.

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()));
    }   
});     

Giải pháp này ghi nhớ vị trí cuộn

    var currentscroll = 0;

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

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

        $(window).scrollTop(currentscroll);

        }
    });

Hãy thử cái này:

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`

Như đã lưu ý trong các câu trả lời trước ở đâu đó, biến window.innerHeight được cập nhật chính xác ngay bây giờ trên iOS10 khi bàn phím xuất hiện và vì tôi không cần hỗ trợ cho các phiên bản trước nên tôi đã đưa ra bản hack sau có thể dễ dàng hơn một chút sau đó thảo luận "các giải pháp".

//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;
});

sau đó bạn có thể sử dụng:

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

để kiểm tra xem bàn phím có nhìn thấy không. Bây giờ tôi đã sử dụng nó trong ứng dụng web của mình và nó hoạt động tốt, nhưng (như tất cả các giải pháp khác) bạn có thể thấy tình huống không thành công vì kích thước "mong đợi" không được cập nhật đúng cách hoặc một cái gì đó.

Tôi đã thực hiện một số tìm kiếm và tôi không thể tìm thấy bất cứ điều gì cụ thể cho "trên bàn phím hiển thị" hoặc "trên bàn phím bị loại bỏ". Xem danh sách chính thức của các sự kiện được hỗ trợ . Xem thêm Ghi chú kỹ thuật TN2262 cho iPad. Như bạn có thể đã biết, có một sự kiện cơ thể onorientationchangebạn có thể kết nối để phát hiện phong cảnh / chân dung.

Tương tự, nhưng một phỏng đoán hoang dã ... bạn đã thử phát hiện thay đổi kích thước chưa? Thay đổi chế độ xem có thể kích hoạt sự kiện đó gián tiếp từ bàn phím được hiển thị / ẩn.

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

Mà chỉ đơn giản là cảnh báo chiều cao mới trên bất kỳ sự kiện thay đổi kích thước nào ....

Tôi đã không tự mình thử điều này, vì vậy đây chỉ là một ý tưởng ... nhưng bạn đã thử sử dụng các truy vấn phương tiện với CSS để xem khi nào chiều cao của cửa sổ thay đổi và sau đó thay đổi thiết kế cho điều đó? Tôi sẽ tưởng tượng rằng Safari di động không nhận ra bàn phím là một phần của cửa sổ để hy vọng nó sẽ hoạt động.

Thí dụ:

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

Vấn đề là, ngay cả trong năm 2014, các thiết bị xử lý thay đổi kích thước màn hình sự kiện, cũng như các sự kiện cuộn, không nhất quán trong khi bàn phím mềm đang mở.

Tôi đã thấy rằng, ngay cả khi bạn đang sử dụng bàn phím bluetooth, iOS đặc biệt gây ra một số lỗi bố cục lạ; Vì vậy, thay vì phát hiện bàn phím mềm, tôi chỉ phải nhắm mục tiêu các thiết bị rất hẹp và có màn hình cảm ứng.

Tôi sử dụng truy vấn phương tiện (hoặc window.matchMedia ) để phát hiện chiều rộng và Modernizr để phát hiện sự kiện chạm.

Có lẽ dễ dàng hơn để có một hộp kiểm trong cài đặt ứng dụng của bạn, nơi người dùng có thể chuyển đổi 'bàn phím ngoài được đính kèm?'.

Trong bản in nhỏ, giải thích cho người dùng rằng bàn phím ngoài hiện không thể phát hiện được trong các trình duyệt ngày nay.

Chà, bạn có thể phát hiện khi hộp đầu vào của bạn có tiêu điểm và bạn biết chiều cao của bàn phím. Ngoài ra còn có CSS ​​để có được hướng của màn hình, vì vậy tôi nghĩ bạn có thể hack nó.

Bạn sẽ muốn xử lý trường hợp của một bàn phím vật lý bằng cách nào đó, mặc dù.