Khi dùng ios safari Mobile input focus thì keyboard không hiện lện

79 lượt xem

profile picture

Ẩn danh

Ngày 4 tháng 07 năm 2023

Hiện mình đang làm React + Typescript bằng mobile web. Mình muốn làm để khi render page lần đầu, trong input mình focus thì keyboard sẽ hiện lên. Nhưng trong môi trường ios safari mobile, mình dùng useRef rồi làm focus thì focus hoạt động bình thường nhưng keypad không hiện lên. Mình có thử tìm thì theo chính sách của iOS thì cái này sẽ bị chặn, nhưng mình có refer thử mobile web của các service khác thì cũng thấy có vài chỗ có tính năng như mình đang muốn làm. Vậy có cách nào để làm được như vậy không nhỉ? Nếu làm như cách mình đang thử thì trong hướng dẫn của iOS có ghi có thể làm qua interaction với user. Thế là mình thêm một button ẩn bằng hidden, rồi mình focus ở click event và khi rendering thì mình gọi click event. Cơ mà nó vẫn không chạy như mình muốn. Ai xem giúp mình với, mình cảm ơn.

Đánh giá câu hỏi ngay!

Hãy ấn Up Vote với những câu hỏi cụ thể và chi tiết

Hãy ấn Down Vote với những câu hỏi chưa rõ ràng Careerly sẽ nhắc người hỏi chỉnh sửa lại.

2 câu trả lời

BEST

Ảnh đại diện của Careerly AI Bot

➡ Đây là câu trả lời được tạo tự động bởi ChatGPT ⬅ Trong iOS, việc tự động focus vào một input field và mở bàn phím ảo (soft keyboard) không được hỗ trợ. Lý do chính là để ngăn chặn các hành vi spam hoặc quảng cáo không mong muốn. Tuy nhiên, có một số cách để giải quyết vấn đề này: 1. Tạo một sự kiện mô phỏng người dùng: Trong hướng dẫn của iOS, họ cho biết hành động này có thể được thực hiện thông qua một sự tương tác với người dùng. Một cách để đạt được điều này là sử dụng một thư viện như react-use-gesture để bắt một sự kiện chạm vào màn hình, sau đó focus vào input field. Tuy nhiên, cần chú ý rằng việc này có thể không hoạt động tốt với mọi trình duyệt. 2. Hiển thị một thông báo hoặc tooltip: Để khách hàng biết rằng họ cần phải nhấn vào trường nhập để bắt đầu, bạn có thể hiển thị một thông báo hoặc tooltip. Dù sao đi nữa, mục tiêu là giúp người dùng biết rằng họ cần phải tương tác với trường nhập. 3. Dùng setTimeout: Một giải pháp khác là dùng hàm setTimeout() để đặt thời gian chờ trước khi thực hiện hàm focus(). Mặc dù việc này không đảm bảo hoạt động trên mọi trình duyệt và phiên bản iOS, nhưng đôi khi nó có thể giúp giải quyết vấn đề. Code ở dưới là ví dụ với setTimeout(). ----- ✅Bạn có thể để lại bình luận ở dưới để đánh giá câu trả lời từ ChatGPT đã tốt chưa, hay vẫn còn điểm nào sai hoặc thiếu sót.

1useEffect(() => {
2    const timer = setTimeout(() => {
3        inputRef.current?.focus();
4    }, 1000); // adjust the time according to your need
5
6    return () => clearTimeout(timer); // clean up the timer when the component is unmounted or re-rendered
7}, []);
Ảnh đại diện của Hoàng Long

Bạn dùng thử autofocus xem

Đăng ký ngay bây giờ để đọc toàn bộ câu trả lời!

Cộng đồng lập trình viên sẽ giải đáp tường tận cho bạn.

Xem thêm

Đồng ý với Điều khoản dịch vụ Chính sách bảo mật của Careerly

Bạn đã có tài khoản rồi?

Đăng ký ngay bây giờ để đọc toàn bộ câu trả lời!

Cộng đồng lập trình viên sẽ giải đáp tường tận cho bạn.