2012-02-10 16 views
12

Điều này khiến tôi phát điên và tôi không thể tìm thấy câu trả lời ở bất cứ đâu.html phonegap android: bàn phím số mềm thay vì nút đi

Tôi có các biểu mẫu trong ứng dụng điện thoại của mình. Nếu kiểu đầu vào = "văn bản", bàn phím văn bản bật lên và "di chuyển" được hiển thị ở góc. Khi bạn nhấp vào, nó sẽ gửi biểu mẫu. Đó là tất cả các công trình như tôi mong đợi. Nhưng nếu tôi sử dụng kiểu đầu vào = "số", bàn phím số bật lên và "tiếp theo" được hiển thị ở góc. Khi bạn nhấp vào tiếp theo, nếu có một hộp nhập liệu khác trước thẻ nút, nó sẽ chuyển đến đầu vào đó. Không sao đâu. . . không lý tưởng, nhưng có ý nghĩa. Nhưng nếu đó là trường nhập cuối cùng trên trang, hãy nhấp vào "tiếp theo" sẽ không làm gì cả. Nó không tập trung vào nút (ngay cả với tabindex) và nó không gửi biểu mẫu (lý tưởng).

Tôi đang sử dụng phonegap 1.3.0 và jquery 1.7 nếu bất kỳ cách nào trong số đó đều hữu ích.

+0

+1 về điều này, tôi đang thử mọi thứ. Trong khi đó PhoneGap lên đến phiên bản 1.5.0 và tôi sử dụng jQueryMobile 1.0.1. Không có tiến bộ. Tôi đã thử nếu nó là hậu quả của bất kỳ thuộc tính trường nào, nhưng không có kết quả. – Wytze

+0

Có vẻ như đây không phải là vấn đề PhoneGap - nó cũng xảy ra trong trình duyệt Android thông thường. –

+0

Đúng là điều này không liên quan gì đến điện thoại. Mặc dù tôi nghĩ rằng có một phương pháp dựa trên java để sửa chữa nó bởi vì ứng dụng của tôi là phonegap. Sửa chữa duy nhất tôi đã tìm thấy cho đến nay là trường ẩn của Wytze tự động gửi biểu mẫu. Đó là một hack khủng khiếp, và trong khi đó chúng tôi đang lên đến phonegap 2.0. Tôi vẫn thấy đây là một quyết định rất đáng ghét đối với một số nhà phát triển Android. – grail143

Trả lời

5

Được rồi, giờ tôi có một thứ trông giống như một câu trả lời và các câu trả lời giống như một câu trả lời.

Đó là một hack khủng khiếp, và tôi đang gặp một số tác dụng phụ tại thời điểm này, nhưng đó là một bước nhảy vọt nhỏ cho nhân loại anyway.

Thêm đầu vào văn bản ẩn vào biểu mẫu của bạn, thao tác này sẽ tự động gửi biểu mẫu ngay sau khi nhận được tiêu điểm. Vì nó chỉ có thể nhận được tiêu điểm từ người dùng nhấn 'Tiếp theo' hoặc tabbing từ trường số cuối cùng, nên có một logic khá vững chắc trong chuỗi người dùng.

<input type='text' style="opacity:0;" onfocus="javascript:$('#thisForm').submit();"> 

Các tác dụng phụ bao gồm:

  • lĩnh vực biểu mẫu ẩn một thời gian ngắn sẽ được hiển thị. Bạn có thể tránh điều này bằng cách bằng cách sử dụng trình xử lý onfocus để cũng tập trung lại vào trường số mà vừa được để lại. Hoặc bạn có thể thiết lập chiều rộng của đầu vào là 0. Sau này làm việc tốt nhất cho tôi.
  • nếu bạn đang sử dụng jQueryMobile như tôi, bạn đang mời xấu chuyển trang khủng khiếp trên chính mình, vì vậy nếu biểu mẫu của bạn nằm trong hộp thoại và gửi biểu mẫu đóng hộp thoại, hãy đảm bảo đặt hộp thoại chuyển tiếp (khi đó đang được mở từ màn hình trước đó) thành 'không'.
+0

Điều đó rất hữu ích! cảm ơn! – grail143

+0

Tôi không thể ẩn đầu vào bằng cách có chiều rộng: 0 trên phiên bản HTC G2 Android 2.3.4.Tuy nhiên, tôi đã có thể ẩn nó bằng màu nền: trong suốt ;, và ẩn đường viền lấy nét màu cam gây phiền nhiễu cho android bằng -webkit-tap-highlight-color: rgba (255,255,255,0); http://stackoverflow.com/questions/5210481/disable-android-orange-outline-higlight-on-focus. – Bobby

+0

Hacky nhưng hữu ích! Tôi giấu đầu vào bằng cách đặt 'vị trí: tuyệt đối ' – maGo

9

Bạn có thể phát hiện trên báo chí bàn phím tiếp theo bằng cách sử dụng các ràng buộc sau trong JQuery:

$('input').on('keydown', function(e){ 
    if(e.which === 9) { 
     //your code here 
    } 
}); 

Nút 'bên cạnh' mô phỏng sự kiện tab bấm phím trên bàn phím, đó là chìa khóa mã 9. Thật không may, các sự kiện nhấn phím và khóa không phát hiện sự kiện quan trọng tiếp theo, vì vậy bạn cần phải liên kết sự kiện này khi nhấn phím.

Hy vọng điều đó sẽ hữu ích!