Kích hoạt thủ công bàn phím iPhone/iPad/iPod từ JavaScript

Question

Tôi đang phát triển trình chỉnh sửa mã HTML bằng cách sử dụng các sự kiện DIV và ghi lại đơn giản. Khi tôi sử dụng tính năng này trên iPad, bàn phím không bao giờ bật lên vì tôi không kỹ thuật trong một trường có thể chỉnh sửa.

Có cách nào để lập trình cho iPad biết rằng tôi cần một keybaord không?

Answer 1

Câu trả lời cho câu hỏi này gợi ý rằng nó không thể xảy ra: Why doesn't @contenteditable work on the iPhone?

Một đồng nghiệp của tôi, người đã làm việc trên một dự án tương tự đã kết thúc bằng một textarea cho phiên bản iPad của biên tập viên của mình, và contenteditable divs/nhịp cho các trình duyệt hỗ trợ có thể chỉnh sửa nội dung. Có lẽ một cái gì đó tương tự sẽ làm việc cho bạn.

Answer 2

Tôi nhận thấy rằng việc gọi số prompt("Enter some value") kích hoạt bàn phím trên iPad của tôi 2. Không chắc liệu điều này có hữu ích trong trường hợp của bạn hay không.

Answer 3

Nếu mã của bạn được thực thi thông qua một cái gì đó đã được bắt đầu thông qua một hành động người dùng thì nó sẽ hoạt động.

Ví dụ:

làm việc này (bật bàn phím):

<input type='text' id='foo'><div onclick='$("#foo").focus();'>click</div> 

này không hoạt động (đầu vào được một biên giới nhưng không có bàn phím pop):

<input type='text' id='foo'> 
<script> 
    window.onload = function() { 
    $("#foo").focus(); 
    } 
</script> 

Answer 4

Dưới đây là một giải pháp cho bạn:

<input id="my-input" type="text" /> 

<script type="text/javascript"> 
    var textbox = document.getElementById('my-input'); 
    textbox.select(); 
</script> 

Answer 5

Đặt văn bản trong suốt trên div nội dungChỉnh sửa được. Bàn phím sẽ mở ra ngay sau khi người dùng lấy nét văn bản.

Đăng ký event listener trên vùng văn bản cho sự kiện focus và đặt visibility của văn bản là hidden. Điều này ngăn chặn con trỏ nhấp nháy.

Đặt visibility của vùng văn bản trở lại visible sau khi sự kiện blur xảy ra.

Đăng ký người nghe sự kiện bổ sung cho keydown, keyup, keypress sự kiện và xử lý các sự kiện theo cùng một cách, khi bạn xử lý chúng trong div nội dung có thể chỉnh sửa.

Answer 6

Để đặt bàn phím hiển thị trên thiết bị iOS, bạn cần tập trung vào phần tử có thể chỉnh sửa, chẳng hạn như input hoặc textarea. Hơn nữa, phần tử phải là có thể nhìn thấy và chức năng .focus() phải được thực hiện để đáp ứng với tương tác của người dùng, chẳng hạn như nhấp chuột.

Điều này là - chúng tôi KHÔNG muốn phần tử đầu vào hiển thị .. Tôi đã bỏ qua điều này một cách yên tĩnh và cuối cùng đã nhận được kết quả mà tôi đang tìm kiếm.

Đầu tiên, tạo một yếu tố bạn muốn sử dụng để hiển thị bàn phím - trong trường hợp này một nút, và một yếu tố đầu vào ẩn: (Working jsFiddle hoặc Test on a mobile device)

<button id="openKeyboard">Open Keyboard</button> 
<input id="hiddenInput" style="visibility: hidden;"> 

Sau đó sử dụng javascript sau:

document.getElementById('openKeyboard').addEventListener('click', function(){ 
    var inputElement = document.getElementById('hiddenInput'); 
    inputElement.style.visibility = 'visible'; // unhide the input 
    inputElement.focus(); // focus on it so keyboard pops 
    inputElement.style.visibility = 'hidden'; // hide it again 
}); 

Ghi chú:

1. tôi đã nhận thấy rằng iOS Safari sẽ tự động cuộn và thu phóng đến khu vực của đầu vào để đảm bảo bạn sử dụng đúng chế độ xem chế độ xem và định vị phần tử đầu vào của bạn ở vị trí có liên quan.
2. Bạn có thể sử dụng một số CSS trên đầu vào của mình như đặt opacity, height và width thành 0. Tuy nhiên, nếu đầu vào của bạn bị ẩn hoàn toàn, thao tác này sẽ không hoạt động trở lại, vì vậy, hãy đảm bảo bạn rời khỏi padding hoặc border để có kết quả hiển thị (mặc dù nó không hiển thị do độ mờ đục). Điều này cũng có nghĩa là bạn không nên sử dụng display:none để ẩn nó, các thành phần ẩn chỉ không được phép tập trung.
3. Sử dụng các sự kiện bàn phím thông thường (keydown, keypress, keyup) trên đầu vào bị ẩn của bạn để truy cập tương tác của người dùng như bình thường. Không có gì đặc biệt ở đây.