Lỗi đầu vào với bàn phím trên Galaxy S2 sử dụng jQuery Mobile và Phonegap

Question

Chúng tôi đang phát triển một ứng dụng web di động trong jQuery Mobile 1.0.1 và Phonegap 1.4.1 và đã gặp sự cố với bàn phím trên galaxy s2.

Chúng tôi có một thực đơn mà trượt ra và chứa một đầu vào tìm kiếm.

<input type="search" placeholder="Search..." name="search" id="menu_search" data-role="none" /> 

Khi chúng ta khai thác trong đầu vào để nó giành lấy nét, bàn phím mở ra nhưng không cho phép chúng ta gõ bất cứ điều gì trong tôi đoán một đầu mối ở đây là nó cho chúng ta một bàn phím văn bản thông thường và không phải bàn phím tìm kiếm (có kính lúp làm khóa nhập)

Nếu chúng ta tập trung đầu vào khi menu mở: $("#menu_search").focus() - Bàn phím tìm kiếm đang mở khi menu hiển thị và chúng tôi có thể tìm kiếm NHƯNG ngay sau khi chúng tôi nhấn vào đầu vào, bàn phím sẽ thay đổi thành bàn phím thông thường và chúng tôi không thể nhập bất cứ thứ gì.

Một đầu mối khác là khi nhập bàn phím, công cụ tự động dự đoán sẽ hoạt động nhưng khi nhấn vào tùy chọn đúng, chỉ thêm khoảng trắng vào đầu vào và không có ký tự nào khác.

Chúng tôi đã thử một loạt các attribues khác trên đầu vào tìm kiếm không có kết quả:

<input type="search" placeholder="Search..." name="search" id="menu_search" value="" data-role="none" autocomplete="off" autocorrect="off" autocapitalization="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" style="-webkit-appearance:searchfield;" class="ui-autocomplete-input" /> 

bài này hoạt động tốt trên HTC Desire chạy phiên bản 2.2 và một mong muốn chạy CM7 (Android 2.3.7)

Chúng tôi thậm chí đã cố gắng thay đổi đầu vào cho một textarea nhưng điều này đã làm khá nhiều điều tương tự :(

tôi cũng đã cố gắng:

$("#menu_search").live('focus',function(event){ 
    event.preventDefault(); 
}); 

để xem điều đó có ngăn không cho nó thay đổi bàn phím nhưng không may mắn.

Tuy nhiên, chúng tôi có một mục nhập tìm kiếm khác trong ứng dụng hoạt động tốt, khác biệt duy nhất là tìm kiếm khác nằm trong trang "propper": data-role="page" và menu nằm ngoài tất cả các trang khác và trong chỉ cần thiết lập để ẩn ban đầu.

Xin vui lòng giúp đỡ, tôi đang khóc máu!

Answer 1

Bạn đã thử thêm thuộc tính data-native-menu = "false" vào thẻ nhập tìm kiếm của mình chưa.

Answer 2

Bạn có thể có

-webkit-user-select: none; 

Trong CSS của bạn ở đâu đó. Nếu bạn bật lựa chọn văn bản cho các đầu vào

input, textarea { -webkit-user-select: text; } 

hoạt động lại!

Answer 3

Nếu bạn vẫn bị mắc kẹt, hãy thử cập nhật lên phonegap 2.0. Nó sửa một số vấn đề đầu vào.

Answer 4

$('#pageid').live('pageshow', function(event, ui) { 
    $(this).delegate('input[data-type="search"]', 'keyup', function() { 
     if($(this).val().length != 0) 
     keyword = $(this).val(); 

    }); 
}); 

Answer 5

i'v tạo ứng dụng bằng cách sử dụng phonegap + jequery bạn tìm trong ứng dụngStore "AssignmentReminder" hoặc nhập vào trường tìm kiếm koshWTF. . Tôi đã khuyến khích vấn đề này trước và chưa sửa nó như tôi đoán vấn đề 4.0.1 của nó không phải là khoảng cách điện thoại cũng không phải jquery di động, bởi vì tôi vẫn có thể gõ dưới 4.0.4 và ít hơn.hy vọng bạn tìm thấy câu trả lời cho nó bởi vì tôi đã tìm kiếm aloot thời gian qua và không thể tìm thấy nó.

Answer 6

Tôi có/có cùng sự cố trên Note II chạy 4.1.1 bắt nguồn từ Phonegap 2.6.0 (mặc dù tôi cũng có thể sao chép trong 2.5.0), jQuery Mobile 1.2.0 và jQuery 1.7.2. Bàn phím của tôi là SwiftKey 4.0.1.128.

Ngoại trừ thay vì chỉ một đầu vào gây ra sự cố, biểu mẫu của tôi có nhiều mục nhập mà cuối cùng là khiến tôi gặp sự cố. Đó là một nhức đầu thực bởi vì rất khó để tái tạo - đầu vào luôn hoạt động lúc đầu, nhưng nếu bạn chuyển đổi giữa các đầu vào ngẫu nhiên và đủ dài, nó sẽ ngừng hoạt động vào một thời điểm ngẫu nhiên.

Lỗi này thường xảy ra khá nhanh, do đó nó sẽ trở thành một vấn đề khá quan trọng khi tôi phải khởi động lại ứng dụng để biểu mẫu hoạt động trở lại, cuối cùng sẽ ngừng hoạt động trở lại. Cấu trúc biểu mẫu mới của tôi dường như hoạt động tốt; lỗi xảy ra sau vài phút nhập chuỗi dài và chuyển đổi ngẫu nhiên các đầu vào, mà tôi cho rằng không có người dùng nào sẽ thực hiện; nhưng nó vẫn làm tôi khó chịu khi có lỗi.

Tôi đã cố gắng để được trợ giúp về lỗi này trên diễn đàn jQuery Mobile, nhưng họ đã cho tôi một số nhận xét không rõ ràng về cách sử dụng ID phần tử của tôi, vì dường như 99% (có thể thậm chí không thực tế) của lỗi JQM sử dụng ID không đúng. Tôi biết thực tế là các ID của tôi là duy nhất trên mọi trang, nhưng họ nhấn mạnh đó là lỗi ID mà thậm chí không cố gắng chẩn đoán chính xác vấn đề, nhưng tôi đã tiêu hóa.

Tôi cũng nên lưu ý rằng tôi đã tìm thấy giải pháp CSS được cung cấp trong câu trả lời khác trong nhiều vấn đề tương tự khác trên web, nhưng không phải vấn đề chính xác này; trong khi tôi hiểu cách sử dụng của nó, CSS đã không khắc phục vấn đề cho tôi.

hình thức của tôi là tự động nạp vào một dữ liệu role = "nội dung" DIV bên trong một dữ liệu role = "Trang" DIV, vì vậy:

<div data-role="page"> 
    <div data-role="content" id="my-form-holder"> 
    </div> 
</div> 

tôi đã tìm thấy là tốt nhất dạng cấu trúc, ít nhất là trong ứng dụng của tôi, để gây ra lỗi nhất thường là:

<form id="account-add" action="add-edit-account.php" method="post" data-ajax="false" autocomplete="off"> 
    <div data-role="fieldcontain" class="ui-hide-label"> 
     <label for="custom-name"> 
     </label> 
     <input name="custom-name" placeholder="Account Name" value="Service Name Here" type="text"><br> 

     <label for="custom-1"> 
     </label> 
     <input name="custom-1" placeholder="User ID" type="text"><br> 

     <label for="custom-2"> 
     </label> 
     <input name="custom-2" placeholder="Password" type="password"><br> 

     <input type="hidden" name="action" value="add-2"> 
     <input type="hidden" name="newserviceid" value="3"> 
     <input type="hidden" name="userid" value="1"> 
     <input id="account-add-submit" type="submit" name="account-add-submit" value="Add Account"> 
    </div> 
</form> 

dạng HTML được nạp thông qua AJAX và nạp vào DIV theo:

$(ajaxData).appendTo("#my-form-holder").trigger("create"); 

Tự nhiên, biểu mẫu của bạn sẽ khác một chút và bạn thậm chí không thể có biểu mẫu vì bạn chỉ cần nhập dữ liệu tìm kiếm. Nhưng nếu bạn có một hình thức, đó là những gì làm việc tốt nhất cho tôi.

Kể từ khi bạn đang ở trong PhoneGap, bạn có thể thậm chí không cần một hành động theo lý thuyết vì bạn có khả năng sẽ sử dụng jQuery để xử lý đầu vào, nhưng jQuery Mobile hình thức tài liệu nhà nước phải có hành động và phương pháp thuộc tính, vì vậy tôi đã không' Tôi muốn chống lại điều đó. Ngoài ra, jQuery Mobile thường có dữ liệu-role = "trường-chứa" DIV xung quanh mỗi nhãn/nhóm đầu vào, nhưng tôi thấy rằng lỗi xảy ra sớm hơn nếu tôi đã làm điều này. Một lần nữa, lỗi xảy ra tại một thời điểm tùy ý mà không bao giờ giống nhau, vì vậy tôi không biết nếu nó liên quan trực tiếp đến DIV.

Tôi cũng có một đầu vào mã hóa cứng vào một trang khác:

<div data-role="fieldcontain" class="ui-hide-label"> 
    <label for="service-search-input"> 
    </label> 
    <input name="service-search-input" id="service-search-input" placeholder="Enter a service to search for" type="search"> 
</div> 

Điều này dường như làm việc tốt.Tuy nhiên, không có đầu vào nào khác để chuyển sang, vì vậy tốt nhất tôi có thể làm để cố gắng nhân rộng lỗi là lấy nét/không lấy nét đầu vào bằng cách nhấn vào vị trí khác trên trang. Mặc dù, tôi luôn có thể nhập ban đầu trong khi lỗi của bạn không cho phép bạn nhập nếu tôi hiểu chính xác. Bạn có thể thử cấu trúc HTML đó và xem nó có hoạt động không. Không có thẻ hình thức xung quanh đầu vào đó.

Vấn đề của chúng tôi hơi khác một chút (tôi có hầu hết các vấn đề của tôi với biểu mẫu được chèn động), nhưng đây là trang duy nhất tôi có thể tìm thấy ở bất kỳ nơi nào trực tiếp giải quyết vấn đề chính xác này , vì vậy hy vọng điều này sẽ giúp và chúng tôi có thể hiểu thêm về vấn đề này.