kiểu đầu vào = văn bản của người khác so với kiểu đầu vào = kiểu tìm kiếm trong trò chơi HTML5

Tôi mới sử dụng HTML5 khi bắt đầu làm việc với các trường nhập mẫu mới của HTML5. Khi tôi đang làm việc với các lĩnh vực hình thức đầu vào, đặc biệt <input type="text" />và <input type="search" />IMO là không có bất kỳ sự khác biệt trong tất cả các trình duyệt phổ biến bao gồm Safari, Chrome, Firefox và Opera. Và trường tìm kiếm cũng hoạt động như một trường văn bản thông thường.

Vậy, sự khác biệt giữa input type="text"và input type="search"trong HTML5 là gì?

Mục đích thực sự của là <input type="search" />gì?

Ngay bây giờ, không có một thỏa thuận lớn giữa họ - có lẽ sẽ không bao giờ có. Tuy nhiên, vấn đề là cung cấp cho các nhà sản xuất trình duyệt khả năng làm điều gì đó đặc biệt với nó, nếu họ muốn.

Hãy suy nghĩ về <input type="number">điện thoại di động, đưa lên các bảng số hoặc type="email"đưa ra một phiên bản đặc biệt của bàn phím, với @ và .com và phần còn lại có sẵn.

Trên điện thoại di động, tìm kiếm có thể hiển thị một applet tìm kiếm nội bộ, nếu họ muốn.

Mặt khác, nó giúp các nhà phát triển hiện tại với css.

input[type=search]:after { content : url("magnifying-glass.gif"); }

Nó hoàn toàn không có gì trong hầu hết các trình duyệt. Nó chỉ hoạt động như một văn bản đầu vào. Đây không phải là một vấn đề. Thông số kỹ thuật không yêu cầu nó làm bất cứ điều gì đặc biệt. Các trình duyệt WebKit đối xử với nó hơi khác một chút, chủ yếu là với kiểu dáng.

Một đầu vào tìm kiếm trong WebKit theo mặc định có đường viền trong, các góc được làm tròn và kiểm soát chính tả nghiêm ngặt.

Cũng thế,

Điều này không được ghi lại ở bất cứ nơi nào tôi biết và cũng không có trong thông số kỹ thuật, nhưng nếu bạn thêm một tham số kết quả vào đầu vào, WebKit sẽ áp dụng một kính lúp nhỏ với mũi tên thả xuống hiển thị kết quả trước đó.

<input type=search results=5 name=s>

Tài liệu tham khảo

Trên hết, nó cung cấp một ý nghĩa ngữ nghĩa cho input type.

Cập nhật:

Chrome 51 đã xóa hỗ trợ cho thuộc tính kết quả:

Trực quan / chức năng, 2 sự khác biệt nếu loại đầu vào là ' tìm kiếm ': -

1. Bạn nhận được biểu tượng ' X ' ở cuối hộp nhập / tìm kiếm để xóa văn bản trong hộp
2. Nhấn phím ' Esc ' trên bàn phím cũng sẽ xóa văn bản

Trên một số trình duyệt, nó cũng hỗ trợ các thuộc tính "kết quả" và "tự động lưu" cung cấp chức năng "tìm kiếm gần đây" tự động với biểu tượng kính lúp.

Thêm thông tin

Trên thực tế rất cẩn thận về việc giả định nó không làm gì. Khi bạn đi đến kiểu đầu vào với kiểu tìm kiếm, chúng có các thuộc tính nhất định không thể thay đổi. Hãy thử thay đổi đường viền trên một và bạn sẽ thấy nó hoàn toàn không thể. Có một số thuộc tính CSS không được phép khác, hãy kiểm tra điều này để biết tất cả các chi tiết.

Ngoài ra, như Jashwant đã đề cập, có thuộc tính kết quả, mặc dù nó không hoạt động tốt trừ khi bạn cũng bao gồm thuộc tính tự động lưu. Tuy nhiên, trình đơn thả xuống sẽ không hoạt động trong hầu hết các trình duyệt, vì vậy hãy sử dụng một cách nguy hiểm.

Có sự khác biệt về trình duyệt trong hành động, khi bạn nhập một số từ rồi nhập ESC vào đầu vào type="search"trong chrome / safari, hộp nhập sẽ bị xóa. nhưng trong type="text"kịch bản, các từ sẽ không được xóa. Vì vậy, hãy cẩn thận chọn loại đặc biệt là khi bạn sử dụng nó cho tính năng tự động hoàn thành hoặc liên quan đến tìm kiếm

Điểm thưởng: input type="search"có khả năng sử dụng onsearchthuộc tính (mặc dù tôi đã nhận thấy điều này KHÔNG hoạt động trong Trình duyệt Edge mới của microsofts), loại bỏ sự cần thiết phải viết một onkeypress=if(key=13) { function() }điều tùy chỉnh .

sử dụng kiểu nhập = "tìm kiếm" làm cho văn bản của keybord enterkey hiển thị "tìm kiếm", điều này có thể cải thiện trải nghiệm người dùng. tuy nhiên, bạn phải điều chỉnh kiểu nếu sử dụng loại này.

Tùy thuộc vào quan điểm của lập trình viên, lập trình viên có thể dễ dàng xác định mục đích của đầu vào bằng cách xem loại và dễ dàng cho kiểu CSS và JavaScript hoặc JQuery để xác minh quy tắc trong đầu vào.

Nhưng nó có ảnh hưởng xấu đến yếu tố đầu vào yout, nếu bạn đặt

<input type="search">

Và trong css của bạn, bạn đặt

input {background: url("images/search_bg.gif");}

Nó sẽ không hiển thị ở tất cả.