iPad không viết văn bản trong <input>

Question

Tôi đang gặp sự cố với trường <input> khi chạy ứng dụng của tôi trên iPad.

Trên màn hình, bạn nhấp vào hộp văn bản, nhập văn bản vào và nhấp vào nút để xác thực đầu vào. Trên iPad tuy nhiên nó sẽ mở bảng điều khiển bàn phím khi bạn nhấp vào nó, nhưng văn bản không hiển thị trong hộp văn bản khi bạn gõ.
Để làm cho mọi việc trở nên thú vị hơn, tôi có một số <textarea> trong một phần khác của ứng dụng và nó hoạt động hoàn hảo. Sự khác biệt là một là ngồi trên đầu trang của ứng dụng và khác là trong một html nhập khẩu.

Cấu trúc của ứng dụng là như thế này:

Ngày đầu tôi có trang HTML5 chính, trong đó nhập khẩu một trang html có chứa 3 divs. Mỗi div lần lượt nhập các trang html khác. Và những trang đó có nội dung khác nhau, bao gồm cả trường nhập có vấn đề. Something như thế này:

Main.html 
    -> container.html (imported via iframe) 
     -> div1 (imports page n-1 via load(url)) 
     -> div2 (imports page n via load(url)) 
     -> div3 (imports page n+1 via load(url)) 

pageN.html 
    -> contains the <input> field 

Mã cho <textarea> ngồi trên html chính là như thế này:

<form id="formNotes"> 
    <textarea id="mainTextbox" type="text" onKeyUp="RefreshNote()" onChange="RefreshNote()"></textarea> 
</form> 

Và mã cho <input> lĩnh vực bên trong trang html nhập khẩu là như thế này:

input{ 
    -webkit-user-select: auto; 
} 

<form id="formInput"> 
    <input id="text1" type="text" ontouchstart="OpenKeyboard(this)" onKeyDown="WriteText(this)" onKeyUp="WriteText(this)" onChange="WriteText(this)"></input> 
</form> 

Một điều tôi đã học về cách sử dụng sự kiện trên HTML được nhập mặc dù bạn cần sử dụng ontouchstart và các công cụ khác để gọi hàm nhấp chuột. Nhưng trong trường hợp này tôi có thể làm cho iPad mở bàn phím, vì vậy tôi không biết tại sao nó không nhận ra nhấp chuột trên các phím bàn phím, hoặc tại sao nó không gửi giá trị vào hộp văn bản.

[EDIT:] Tôi đã tìm ra lý do tại sao tôi không nhận được bất kỳ văn bản nào vì iPad cho rằng trường <input> không tồn tại (nó hiển thị trống trong cảnh báo thay vì [object Object] hoặc [object HTMLInputElement]). Tôi không biết tại sao.

[CHỈNH SỬA 2:] Tôi đã cố gắng sử dụng getElementsByTagName và getElementsByClassName thay vì getElementById. Với điều đó, dường như nhận ra <input>, nhưng tôi vẫn không thể đạt được giá trị.

Answer 1

Đây không phải là một giải pháp thực tế cho vấn đề, nhưng vấn đề khá "thô" workaround.

Vì lý do nào đó bàn phím trong iPad không gửi giá trị vào <input>, mặc dù nó kích hoạt các sự kiện chính. Vì vậy, tôi đã buộc phải nắm bắt các giá trị, viết chúng xuống và sau đó gửi chuỗi đầy đủ vào hộp văn bản. Nói cách khác, hãy thực hiện công việc tương tự mà bàn phím sẽ tự động bắt đầu!

// Text container 
temp = ""; 

document.addEventListener('keydown', function(event) { 

    // Checks if the key isn't the delete 
    if(event.keyCode != 8){ 

     // Converts and writes the pressed key 
     temp += String.fromCharCode(event.keyCode); 
    } 
    else{ 
     // Deletes the last character 
     temp = temp.slice(0, temp.length-1); 
    } 
} 

document.addEventListener('keyup', function(event) { 

    // Writes the text in the text box 
    document.getElementById("text1").value = temp; 
} 

Tuy nhiên, giải pháp này chỉ hoạt động đối với ký tự chữ và số. Nếu tôi muốn sử dụng các ký tự đặc biệt, tôi cần phải thêm một trường hợp chuyển đổi cho mỗi mã khóa riêng lẻ (charCode hoạt động trên iPad, nhưng nó hoạt động lạ trên các trình duyệt máy tính để bàn).

Answer 2

Khi bạn tự động tạo đầu vào hoặc tải html sau cuộc gọi document.ready, chức năng jQuery .live() là vé.

Vì vậy, trong khi thông thường bạn sẽ có một chức năng như thế này:

$(function() { 

    $('#text1').on('keyup', function() { 
     // do something 
    }) 
}) 

sẽ trở thành:

function doSomething() { 
    // do something 
} 
$(function() { 

    $('#text1').live('keyup', doSomething); 
}) 

Answer 3

Tôi gặp sự cố tương tự khi tạo ứng dụng PhoneGap. Bạn không chắc chắn liệu đó có phải là vấn đề tương tự hay không:

Thủ phạm là -webkit-user-select: none;.

Here's the demo.

Tôi đã có thể nghĩ việc vô hiệu hóa do người dùng chọn chỉ ngăn các công cụ khác nhau như kính lúp hoặc nút copy'n'paste xuất hiện, nhưng nó quay ra này hoàn toàn vô hiệu hóa các đầu vào. Bàn phím hiển thị khi nhấn vào trường nhập - nhưng đó là về nó: không có gì bạn nhập sẽ hiển thị trong trường nhập.

Xóa -webkit-user-select: none; hoặc ít nhất áp dụng nó một cách có chọn lọc đã thực hiện thủ thuật.

Và chỉ bây giờ tôi mới viết câu trả lời này là google cuối cùng, sẽ phân phối. Dưới đây là another answer on SO;)

Answer 4

Một workaround thô (đối với tất cả các ký tự):

document.addEventListener('keydown', function(e) { 
    window.focus() 
    $(':focus').focus() 
});