Không thể gõ vào trường đầu vào HTML

Tôi đang làm việc trên một dự án web di động. Hôm nay tôi phát hiện ra một lỗi lạ khiến các trường nhập liệu không hoạt động. Khi nhấn/nhấp vào trường nhập, nó nhận trạng thái :focus nhưng tôi không thể nhập bất kỳ thứ gì - không có văn bản nào hiển thị. Nó chỉ xảy ra trong Safari và Mobile Safari trên iOS

Tôi chưa bao giờ tìm thấy lỗi này trước đây. Vì vậy, tôi đã tìm kiếm với từ khóa Safari cannot type in input. Tôi tìm thấy một chủ đề StackOverflow (tất nhiên. ) Trường nhập liệu Lỗi Safari trên iOS — Không thể nhập bất kỳ văn bản nào

Câu trả lời được chấp nhận gợi ý đặt -webkit-user-select: text vào trường nhập liệu. Vì vậy, tôi đã làm điều đó. Va no đa hoạt động. Tôi có thể nhập vào trường nhập và văn bản hiển thị

---

Dự án web dành cho thiết bị di động mà tôi đang thực hiện cần cung cấp trải nghiệm giống như ứng dụng gốc. Tôi có quy tắc này được áp dụng trên toàn cầu kể từ khi bắt đầu dự án

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

user-select: none ngăn giao diện người dùng lựa chọn văn bản của iOS hiển thị khi người dùng nhấn và giữ nội dung văn bản. Ví dụ: khi nhấn và giữ một nút, điều này có thể xảy ra

Menu chú thích không mong muốn khi nhấn và giữ phần tử giao diện người dùng

user-select: none đã được thêm vào để ngăn chặn sự cố này

Vì tôi có quy tắc với bộ chọn * nên quy tắc này áp dụng cho mọi thứ, kể cả các trường nhập liệu

Và nó gây ra tác dụng phụ — trên Safari, người dùng không thể nhập vào các trường nhập liệu khi có user-select: none áp dụng cho họ. Đó là lý do tại sao hành vi mặc định của các trường đầu vào bị hỏng

Nếu bạn không thể nhập vào các trường nhập văn bản trong Chrome hoặc Firefox, thì bài viết này sẽ giúp bạn khắc phục sự cố. Sự cố này có thể xảy ra với bất kỳ trình duyệt nào, nhưng hầu hết mọi người đều gặp phải sự cố này trong Google Chrome hoặc Mozilla Firefox. Đôi khi, đó có thể chỉ là một trục trặc mà bạn có thể khắc phục bằng cách khởi động lại trình duyệt – hoặc, bạn có thể gặp sự cố này nếu bàn phím của bạn hoạt động không chính xác. Tuy nhiên, nếu vấn đề vẫn còn ngay cả sau khi kiểm tra những điều này, những đề xuất sau đây là dành cho bạn

Không thể nhập vào trường văn bản trong Chrome & Firefox

Nếu bạn không thể nhập vào các trường nhập văn bản trong Chrome hoặc Firefox – như thanh địa chỉ, thanh tìm kiếm, v.v. , sau đó thử các đề xuất này

1. Vô hiệu hóa tăng tốc phần cứng
2. Vô hiệu hóa phần mở rộng/tiện ích bổ sung Mô-đun tích hợp IDM
3. Đăng ký lại các tệp DLL có liên quan
4. Chạy Trình kiểm tra tệp hệ thống

1] Vô hiệu hóa tăng tốc phần cứng

Trình duyệt của bạn đôi khi sử dụng chức năng này để thực hiện một công việc cụ thể hoặc thực hiện một lệnh. Tuy nhiên, khả năng tăng tốc phần cứng này có thể tạo ra một số vấn đề như vấn đề này. Nếu vậy, bạn có thể tắt tăng tốc phần cứng và kiểm tra xem nó có giải quyết được sự cố của bạn hay không. Bài viết này sẽ cho bạn biết cách tắt tăng tốc phần cứng trong Chrome và Firefox

2] Vô hiệu hóa phần mở rộng/tiện ích bổ sung Mô-đun tích hợp IDM

IDM của Internet Download Manager là một trong những trình quản lý tải xuống phổ biến nhất hiện có. Nếu bạn đã cài đặt phần mềm máy tính để bàn, bạn cũng có thể đã tải xuống tiện ích mở rộng trình duyệt có tên là Mô-đun tích hợp IDM. Mặc dù nó giúp bạn tích hợp các bản tải xuống trình duyệt của mình với phần mềm máy tính để bàn, nhưng nó cũng có thể gây ra sự cố

Nếu gần đây bạn đã cài đặt tiện ích mở rộng đó và sau đó, trình duyệt của bạn bắt đầu hiển thị các sự cố như thế này, thì bạn nên tắt tiện ích mở rộng/tiện ích bổ sung của trình duyệt này. Trong Chrome, bạn có thể vào Công cụ khác > Tiện ích mở rộng. Trong Firefox, bạn có thể nhấp vào nút Mở menu và chọn Tiện ích bổ sung. Sau đó, chuyển sang phần Tiện ích mở rộng. Tại đây, bạn sẽ tìm thấy phần mở rộng/tiện ích bổ sung của Mô-đun tích hợp IDM. Bạn cần sử dụng nút chuyển đổi để tắt nó

3] Đăng ký lại các tệp DLL có liên quan

Bạn cần đăng ký lại ba tệp DLL

1. mshtmled. dll
2. mshtml. dll
3. jscript. dll

Bài đăng này sẽ chỉ cho bạn cách đăng ký lại tệp DLL

4] Chạy Trình kiểm tra tệp hệ thống

Trình kiểm tra tệp hệ thống là một công cụ dòng lệnh mà bạn có thể sử dụng trên Windows 10/8/7. Nó cho phép bạn quét các tệp hệ thống bị hỏng và tự động khôi phục chúng. Chạy Trình kiểm tra tệp hệ thống và xem điều đó có giúp bạn không

Để giải quyết vấn đề không thể nhập trường đầu vào trong React, hãy đảm bảo sử dụng prop9 defaultValue thay vì

const App = () => {
  return (
    

      
    
  );
};

export default App;

0 cho các trường đầu vào không được kiểm soát. Ngoài ra, đặt một giá trị

const App = () => {
  return (
    

      
    
  );
};

export default App;

1 trên trường và xử lý sự kiện thay đổi

Đây là một ví dụ về cách vấn đề xảy ra

const App = () => {
  return (
    

      
    
  );
};

export default App;

Vấn đề là trường

const App = () => {
  return (
    

      
    




);
};
export default App;

2 có bộ chống đỡ

const App = () => {
  return (
    

      
    
  );
};

export default App;

0, nhưng nó không có chỗ dựa

const App = () => {
  return (
    

      
    
  );
};

export default App;

1 để xử lý các thay đổi của giá trị đầu vào

Cách dễ nhất để giải quyết vấn đề này là sử dụng prop11 để xử lý sự kiện thay đổi trên trường

const App = () => {
  return (
    

      
    
  );
};

export default App;

2

Chúng tôi đã sử dụng giá trị

const App = () => {
  return (
    

      
    
  );
};

export default App;

1 để xử lý sự kiện thay đổi trên trường đầu vào. Hàm defaultValue0 được gọi mỗi khi giá trị của trường thay đổi

Lưu ý rằng chúng tôi lưu trữ giá trị của

const App = () => {
  return (
    

      
    
  );
};

export default App;

2 trong trạng thái

Móc useState có thể được truyền một giá trị trạng thái ban đầu

Nếu bạn không muốn sử dụng giá trị trạng thái ban đầu, hãy chuyển một chuỗi trống vào mócdefaultValue2, e. g. defaultValue3

Giờ đây, mỗi khi người dùng nhập vào trường đầu vào, hàm defaultValue0 sẽ được gọi và đặt giá trị mới cho biến defaultValue5, biến này sẽ hiển thị lại trường

const App = () => {
  return (
    

      
    
  );
};

export default App;

2 và hiển thị giá trị hiện tại

Một cách khác để xử lý vấn đề mà chúng ta không thể nhập đầu vào là sử dụng trường đầu vào không được kiểm soát

Móc useRef() có thể được truyền một giá trị ban đầu làm đối số. Móc trả về một đối tượng tham chiếu có thể thay đổi có thuộc tính defaultValue7 được khởi tạo cho đối số đã truyền

Lưu ý rằng chúng ta phải truy cập thuộc tính defaultValue8 trên đối tượng ref để có quyền truy cập vào phần tử

const App = () => {
  return (
    

      
    
  );
};

export default App;

2 mà chúng ta đặt giá trị

const App = () => {
  return (
    

      
    
  );
};

export default App;

00 trên đó

Khi chúng ta truyền một ref prop cho một phần tử, e. g.

const App = () => {
  return (
    

      
    
  );
};

export default App;

01, React đặt thuộc tính defaultValue7 của đối tượng ref thành nút DOM tương ứng

Móc

const App = () => {
  return (
    

      
    
  );
};

export default App;

03 tạo một đối tượng JavaScript đơn giản, nhưng cung cấp cho bạn cùng một đối tượng ref trên mỗi kết xuất. Nói cách khác, đó gần như là một giá trị đối tượng được ghi nhớ với thuộc tính defaultValue7

Cần lưu ý rằng khi bạn thay đổi giá trị của thuộc tính defaultValue8 của giới thiệu, không có kết xuất lại nào được gây ra

Bây giờ mỗi khi người dùng nhấp vào nút, giá trị của trường đầu vào sẽ được ghi lại. Mẫu này được gọi là các thành phần không được kiểm soát

Lưu ý rằng chúng tôi đã sử dụng giá đỡ defaultValue thay vì

const App = () => {
  return (
    

      
    
  );
};

export default App;

0. Prop defaultValue cho phép chúng tôi chỉ định giá trị ban đầu cho trường đầu vào

Nếu bạn sử dụng set prop

const App = () => {
  return (
    

      
    
  );
};

export default App;

0 trên một trường đầu vào, bạn cũng được yêu cầu set prop

const App = () => {
  return (
    

      
    
  );
};

export default App;

1 và xử lý sự kiện thay đổi, nếu không, bạn không thể nhập vào trường input

Tại sao tôi không thể nhập HTML trường đầu vào?

Tại sao tôi không thể nhập textarea?