Làm cách nào để ẩn bàn phím ảo cho phần tử chọn trong ứng dụng JavaScript Win8?

Question

Tôi đang tạo ứng dụng Windows 8 bằng JavaScript. Tôi có các phần tử html này trong đánh dấu:

<input id="myField1" type="number"></input> 
<select id="myField2"> 
    <option value="one">One</option> 
    <option value="two">Two</option> 
    <option value="three">Three</option> 
</select> 

Khi tôi nhấn myField1 trên thiết bị không có bàn phím ảo, bàn phím ảo xuất hiện. Sau đó nếu tôi chạm vào myField2, bàn phím vẫn giữ nguyên. Nhưng tôi không muốn có typeahead trong lĩnh vực này đặc biệt <select>. Có cách nào để ẩn bàn phím ảo cho nó, cho phép nó chỉ cho các trường <input>?

Answer 1

Theo tài liệu bàn phím cảm ứng, chạm vào hiển thị bàn phím và ẩn hành vi được thiết kế để nhất quán giữa các ứng dụng - giữ tiêu điểm người dùng. Đó là lý do tại sao các phương pháp hiển thị và ẩn không có sẵn trên Windows.UI.ViewManagement.InputPane class.

Điều này touch keyboard whitepaper mô tả chi tiết và gọi ra lý do hành vi tiếp tục giữ bàn phím trong khi điều hướng/tabbing giữa các yếu tố đầu vào đã được thiết kế theo cách này.

Ngoài ra còn có một bộ điều khiển có thể nhận tiêu điểm trong văn bản luồng nhập nhưng không thể chỉnh sửa được. Thay vì không cần thiết lật đổ giao diện người dùng và có khả năng mất phương hướng ở giữa luồng, bàn phím cảm ứng vẫn ở chế độ kiểm soát vì người dùng có thể chuyển qua lại giữa các điều khiển và mục nhập văn bản bằng bàn phím . Do đó, nếu bàn phím đã được hiển thị và tập trung vùng đất trên sự kiểm soát của một trong các loại trong danh sách sau, bàn phím sẽ không tự ẩn. Tuy nhiên, nếu bàn phím không phải là đã hiển thị, bàn phím sẽ không hiển thị chính nó trừ khi chạm vào vùng có thể chỉnh sửa.

Tóm lại, theo nguyên tắc - ứng dụng phải ở lại với bàn phím cảm ứng mặc định. Hãy suy nghĩ kỹ trước khi thử thay đổi hành vi mặc định.

Nếu bạn nhấn một kịch bản mà nó thực sự đang tìm ra nơi để có bàn phím, các whitepaper cũng cung cấp cho manh mối cho một workaround (không dự định). Người ta có thể đặt tiêu điểm theo chương trình tạm thời trên một phần tử không thể chỉnh sửa (nút nói) và bàn phím sẽ tự ẩn. Nhưng điều khiển chọn sẽ bỏ lỡ sự kiện nhấn do thay đổi tiêu điểm có lập trình và sẽ yêu cầu một lần nhấn khác để mở trình đơn thả xuống của nó. Có thể với nhiều nỗ lực hơn, cách giải quyết này có thể được cải thiện. Nhưng một lần nữa, đây là một cách giải quyết và nên được sử dụng một cách thận trọng.

_initializeEventHandlers: function initializeEventHandlers() 
{ 
    myField2.addEventListener('focus', this._onfocus.bind(this)); 
}, 
_onfocus: function onfocus(event) 
{ 
    console.log('on focus invoked'); 
    if (this._movingFocusInProgress) 
    { 
     this._movingFocusInProgress = false; 
     return; 
    } 

    this._movingFocusInProgress = true; 
    b1.focus(); 
    WinJS.Promise.timeout(200).then(function() 
    { 
     myField2.focus(); 
    }); 
}, 

HTML sẽ cần phải có nút kích thước bằng không.

<input id="myField1" type="number" /> 
<select id="myField2" role="banner"> 
    <option value="one">One</option> 
    <option value="two">Two</option> 
    <option value="three">Three</option> 
</select> 
<button id="b1" style="visibility:visible; border-width:0; 
    border-color:transparent;outline-color:transparent; min-width:0; min-height:0"></button>