Tôi có ứng dụng web dành cho thiết bị di động hiển thị hộp thoại trong một vị trí: phần tử cố định che phủ toàn bộ màn hình. Không có vấn đề bao nhiêu nội dung được hiển thị hoặc bao xa trang đã cuộn, yếu tố lớp phủ làm mờ nội dung trang và hộp thoại xuất hiện trên đầu trang của tất cả. Có một trường <input type="search /> trong hộp thoại.Làm cách nào để ngăn việc di chuyển tự nhiên khi trường biểu mẫu nhập văn bản vị trí cố định có được tiêu điểm?
Trên Android, khi người dùng chạm vào lĩnh vực đầu vào để cho nó tập trung, một số hành vi khá thất thường thường (nhưng không phải luôn luôn) xảy ra sau đó:
- Bàn phím mềm xuất hiện, sau đó ngay lập tức biến mất.
- Trang cơ bản (được che phủ bởi lớp phủ) cuộn một vài chục pixel, đôi khi lên, đôi khi xuống, đôi khi theo cả hai hướng và đôi khi nhiều lần. Điều này cũng xảy ra khi trường nhập mất tiêu điểm.
- Phần tử lớp phủ trong giây lát dịch chuyển xuống một vài pixel và sang phải, để lộ nội dung cơ bản dọc theo cạnh trên cùng và cạnh trái của màn hình. (Nó trở về vị trí ít hơn một giây sau đó.)
Đây là trên Android 2.3.4 với trình duyệt tích hợp sẵn. Nó cũng có thể xảy ra trên các phiên bản Android khác.
Trang xây dựng một cái gì đó như thế này: (. Hãy nhớ rằng một số trong những quirks chỉ hiển thị khi trang chứa đủ nội dung để cho phép di chuyển)
<head>
<style type="text/css">
#menuoverlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
background-color: rgba(0,0,0,.75);
text-align: center;
}
#menu {
display: inline-block;
margin-top: 1em;
border: 3px solid #02b;
border-radius: 8px;
padding: 1ex;
background-color: black;
color: silver;
}
</style>
</head>
<body>
<div id="menuoverlay">
<div id="menu">
...menu items...
...menu items...
<form action=""><input type="search"/></form>
</div>
</div>
<div id="content">
...lots of stuff...
...lots of stuff...
...lots of stuff...
</div>
<body>
Có ai khác nhìn thấy hành vi này? Bạn đã tìm thấy một cách để ngăn chặn nó?
Xoá bỏ trang web đã dẫn tôi đến một vài báo cáo về các sự cố tương tự. Dưới đây là tóm tắt về những gì tôi đã đọc cho đến thời điểm này:
- Trên nhiều thiết bị Android, trình duyệt tích hợp dường như không sử dụng các trường nhập của WebKit theo cách mong đợi. Thay vào đó, khi các trường được định nghĩa html được lấy nét, trình duyệt sẽ cố gắng che chúng bằng các tiện ích văn bản mới mà nó tạo ra riêng biệt.
- Các trường văn bản trùng lặp này thường bỏ qua kiểu css, tạo hiệu ứng trong đó các trường trông được tạo kiểu cho đến khi chúng được lấy tiêu điểm, và sau đó đột nhiên hoàn nguyên về kiểu mặc định của hệ thống.
- Trình duyệt Android thường không thể định vị chính xác các trường trùng lặp này. Khi thất lạc, đôi khi chúng có thể nhìn thấy được, nhưng những thời điểm khác chỉ di chuyển các mục tiêu tiêu điểm mà không có bất kỳ dấu hiệu trực quan nào mà chúng đã di chuyển.
- Các sự cố này thường hiển thị khi phần tử tổ tiên của trường nhập có các kiểu như
transform: translate3d(),-webkit-backface-visibilityhoặcposition: fixed.
Dưới đây là một số liên kết có liên quan:
Android Browser textarea scrolls all over the place, is unusable
How can I style an HTML INPUT tag so it maintains CSS when focused on Android 2.2+?
Android 2.2/2.3’s Native Browser and Fixed Positioning
Có vấn đề rất giống nhau, cảm ơn bạn đã chia sẻ tất cả nghiên cứu đó! – spookylukey
Gosh! Đầu vào vị trí cố định của tôi không hoạt động sau đó tôi nhận thấy bạn đề cập đến biến đổi: translate3d() vì vậy tôi đã xóa nó khỏi cơ thể Đó là tất cả (được sử dụng để sửa lỗi trục trặc trong firefox nhưng không cần thiết trong webkit cảm ơn rất nhiều!) ; – Andreas