Mobile Safari - Cách mặc định cho bàn phím số đầy đủ cho mục nhập thập phân w/o type = "number", hoặc vô hiệu hóa kiểu đầu vào Safari = "số" sửa

Question

Tôi có một vấn đề khá cơ bản nhưng bực bội, về cơ bản tôi đã cố gắng để ép buộc các trường đầu vào hoạt động giống như kiểu nhập văn bản (nơi chúng không sửa các mục nhập số không chính xác, chẳng hạn như "0..7" để cắt ngắn "0") và chỉ cho phép xác thực biểu mẫu JS và xác nhận hợp lệ phụ trợ. Tuy nhiên, trong khi tôi muốn cho phép người dùng nhập bất cứ điều gì họ muốn trong lĩnh vực này (kiểu đầu vào = "văn bản"), tôi muốn bàn phím số đầy đủ để hiển thị.

gốc:

<input type="number" name="test" class="answers" id="mileage" value="0.0" maxlength=5 /> 

Nỗ lực khắc phục:

trình trên iPad, nhưng không phải trên máy nghe nhạc iPod, như máy nghe nhạc iPod hiển thị các phím số nhỏ gọn KHÔNG điểm thập phân:

<input type="text" name="test" class="answers" id="mileage" value="0.0" maxlength=5 pattern="\d*"/> 

doesn' t hoạt động trên iPod, vì nó hiển thị bàn phím văn bản đầy đủ, nhưng không mặc định là "số bên" của bàn phím đầy đủ có số thập phân:

<input type="text" name="test" class="answers" id="mileage" value="0.0" maxlength=5 pattern="\d+(\.\d*)?"/> 

Bất kỳ ai có ý tưởng nào? Hoặc là để ngăn Mobile Safari sửa các kiểu số đầu vào (kiểu số hiển thị bàn phím chính xác trên iPod và iPad nhưng đã được sửa trong trường khi bàn phím ẩn) hoặc buộc bàn phím ở bên Số của iPod đầy đủ bàn phím?

FYI: Điều này nghe có vẻ rất giống với vấn đề của tôi, tuy nhiên tôi có thể cần giải pháp khác. Nghe có vẻ như họ mong muốn "Full" bàn phím số xuất hiện theo mặc định nhưng không có số autoformatting rằng Safari làm trên sân khi vào nhân vật khác trong.

Force a numeric keyboard but allow punctuation: HTML5, mobile Safari

Answer 1

Tôi biết điều này là cũ nhưng tôi thấy điều này được yêu cầu khá nhiều.

Để ngăn chặn xác nhận của các loại số đầu vào (và các loại khác), bạn có thể sử dụng thuộc tính novalidate trên <form> yếu tố:

<form novalidate> 
    <input type="number" name="test" class="answers" id="mileage" value="0.0" maxlength=5> 
</form> 

Bạn vẫn sẽ nhận được bàn phím số nhưng nó sẽ không buộc người dùng chỉ nhập số.