it-swarm-vi.tech

Cách biểu thị đầu vào số bị giới hạn theo số gia của một số

Tôi có một yêu cầu cho một hình thức giới hạn giá trị trường ở mức tăng cố định là 50 và tôi không chắc đâu là cách thanh lịch nhất để thể hiện ràng buộc đó theo cách có ý nghĩa.

Giải pháp đơn giản nhất mà bạn nghĩ đến là một phương thức xác thực jQuery kết hợp với một số logic phía máy chủ được gắn với một kiểu nhập văn bản thông thường. Các lựa chọn thay thế khác xuất hiện trong tâm trí là một công cụ chọn số nào đó (hiện tại tôi không biết) có một số tiến bộ trong danh sách tăng hoặc danh sách thả xuống với số lượng giá trị cố định.

Còn ý tưởng nào khác không? Điều gì sẽ cảm thấy trực quan nhất với bạn?

14
Nathan Taylor

Tôi sẽ đề nghị sử dụng phương thức được triển khai trong Safari cho HTML5. Như bạn có thể thấy tại đây có các loại đầu vào mới trong HTML5 cũng có các thuộc tính mới. Trong trường hợp này, bạn sẽ sử dụng một loại số đầu vào với một thuộc tính được gọi là "bước". Mã sẽ trông như thế này:

<input type="number" step="50" min="0" name="some_name" value="0" id="some_name" />

Ngay bây giờ không có nhiều trình duyệt làm bất cứ điều gì với điều này. Tuy nhiên, nếu bạn xem mã đó trong Safari (sử dụng loại tài liệu HTML5), những gì bạn thấy là trường nhập văn bản bình thường với một điều khiển ở bên cung cấp mũi tên lên/xuống làm tăng giá trị bên trong trường theo giá trị "bước" bạn đã phân công.

Vì vậy, đối với một thành phần UI, tôi sẽ sao chép nó cho các trình duyệt chưa hỗ trợ nó, một mũi tên lên/xuống bên cạnh trường nhập liệu. Để cho người dùng biết rằng bạn mong đợi một giá trị cụ thể, bạn chỉ cần viết "vui lòng nhập bội số của 50. ví dụ: 0, 50, 100, 150, v.v." Sau đó, rõ ràng, bạn sẽ cần mã phía máy khách hoặc mã phía máy chủ để xác thực rằng số đã nhập nằm trong các phạm vi đó.

9
RussellUresti

Sử dụng một thanh trượt. Hầu hết các thư viện UI cung cấp các điều khiển thanh trượt và thường cung cấp cho bạn tùy chọn để xác định 'bước', chẳng hạn như 50, giới hạn lựa chọn đối với bất kỳ bội số nào của giá trị đó.

Nếu bạn đang sử dụng HTML5, thẻ đầu vào có loại "phạm vi" (bao gồm thuộc tính bước) mà hầu hết các trình duyệt hỗ trợ HTML5 nên hỗ trợ: http://dev.w3.org/html5/markup/input. phạm vi.html

7
Rahul

Mục đích là gì?

Nếu đó là kế toán/toán/số liên quan, tôi sẽ đề xuất một số nhân. Vì vậy, bạn thấy "x 50" và nó hiển thị tổng số. Nếu đó là số tăng 50 cho một ứng dụng logic, thì tại sao bạn không sử dụng "số gia 50"?

4
Susan R

Tôi nghĩ tốt nhất nên sử dụng a thanh trượt phạm vi theo đề xuất của người khác. Hoặc bạn có thể sử dụng tính năng Tự động hoàn tất cho hộp nhập liệu sẽ hiển thị đề xuất khi người dùng bắt đầu nhập. Dưới đây là ví dụ trình duyệt chéo cho cả hai phương pháp này.

Thanh trượt: http://jqueryui.com/demos/slider/#range

Tự động hoàn tất: http://jqueryui.com/demos/autocomplete/

1

Nó thực sự phụ thuộc vào các giá trị tối thiểu và tối đa là tốt.

Tôi đã chỉ sử dụng một danh sách lựa chọn thông thường để hiển thị các giá trị có thể. Và một giải pháp khác là chỉ hiển thị tổng số một cách đơn giản, để người dùng có thể tự nhập số nhân, nhưng vẫn thấy kết quả.

mockup

tải xuống nguồn bmml - Wireframes được tạo bằng Balsamiq Mockups

1
Nick P