Làm cách nào để hạn chế đầu vào html thành các giá trị số?
|
Ok, đây là một cách khá cơ bản - làm thế nào để buộc một hộp văn bản chỉ chấp nhận đầu vào số. Ai đó đã hỏi tôi điều này hôm nay trong một cuộc gọi hỗ trợ, vì vậy tôi đã thực hiện một số tra cứu nhanh trên mạng và thấy các giải pháp được liệt kê khá không hài lòng. Vấn đề chính với hầu hết các ví dụ mà tôi có thể khai thác được là chúng chỉ bao gồm các giá trị số, nhưng điều đó mang lại trải nghiệm người dùng khá khập khiễng. Bạn vẫn cần cho phép các phím thao tác cơ bản cho hộp văn bản – phím điều hướng, xóa lùi và xóa, tab/shift tab và phím Enter – để hoạt động, nếu không, hộp văn bản sẽ có cảm giác rất khác so với hộp văn bản tiêu chuẩn Show
Có, có những phần bổ trợ cho phép đầu vào được che dấu đủ dễ dàng nhưng hầu hết đều có chiều rộng cố định, điều này khó thực hiện với đầu vào số đơn giản. Vì vậy, tôi đã dành vài phút để viết một plug-in nhỏ có thể tái sử dụng để xử lý tình huống này. Hãy tưởng tượng bạn có một vài hộp văn bản trên một biểu mẫu như thế này và bạn muốn hạn chế nhập vào các số. Đây là một nhỏ. buộc plugin Numeric() jQuery thực hiện những gì tôi muốn thấy trong trường hợp này Đã cập nhật nhờ Elijah Manor về một vài điều chỉnh nhỏ để có thêm các phím cần kiểm tra Với plug-in tại chỗ trong trang của bạn hoặc bên ngoài. js, giờ đây bạn có thể chỉ cần sử dụng bộ chọn để áp dụng nó Trình cắm về cơ bản đi qua từng phần tử được chọn và kết nối trình xử lý sự kiện keydown(). Khi một phím được nhấn, trình xử lý sẽ được kích hoạt và mã khóa của đối tượng sự kiện được gửi. Nhớ lại rằng jQuery chuẩn hóa đối tượng Sự kiện JavaScript giữa các trình duyệt. Về cơ bản, mã này liệt kê một vài mã khóa và từ chối tất cả các mã khác. Nó trả về true để cho biết phím nhấn sẽ đi qua hoặc false để ăn tổ hợp phím và không xử lý nó để loại bỏ nó một cách hiệu quả Đơn giản và công nghệ thấp, và nó hoạt động mà không có quá nhiều thay đổi về hành vi của hộp văn bản thông thường Các bài viết khác có thể bạn thích
Chia sẻ Nội dung này có hữu ích với bạn không? Được đăng bằng JavaScript jQuery HTML Tiếng nói của lý trí
lại. Hạn chế đầu vào trong các hộp văn bản HTML thành các giá trị sốĐẹp. Đối với những thứ như vậy, tôi thường sử dụng plugin tạo mặt nạ [http. // bụi kỹ thuật số. com/projects/masked-input-plugin/] cho phép các phím điều hướng, v.v.
lại. Hạn chế đầu vào trong các hộp văn bản HTML thành các giá trị sốĐây là một ví dụ tuyệt vời về cách thực hiện plugin cho JQuery. Bạn có thể muốn xem jQuery AlphaNumeric của Paulo P. Bến du thuyền. Plugin này giới hạn đầu vào theo nhiều cách thú vị.
lại. Hạn chế đầu vào trong các hộp văn bản HTML thành các giá trị sốTốt nhưng tôi nghĩ rằng bạn có thể nhấp chuột phải rồi dán thứ gì đó không phải là số vào đầu vào đó
lại. Hạn chế đầu vào trong các hộp văn bản HTML thành các giá trị sốĐiều này trở nên phức tạp hơn khi bạn muốn hỗ trợ.
lại. Hạn chế đầu vào trong các hộp văn bản HTML thành các giá trị sốtuyệt,
lại. Hạn chế đầu vào trong các hộp văn bản HTML thành các giá trị sốĐiều này không hoạt động khi bạn sao chép và dán vào hộp văn bản
lại. Hạn chế đầu vào trong các hộp văn bản HTML thành các giá trị sốCó, tính năng này không hoạt động đối với *xác thực* đầu vào số, vì vậy nếu bạn dán thì tính năng này không hiệu quả. Nhưng đó không phải là trọng tâm của phần bổ trợ nhỏ này - đó là phần bổ trợ xác thực dành cho. Mục tiêu ở đây là hạn chế đầu vào của người dùng trong khi nhập để không nhập các ký tự không hợp lệ.
lại. Hạn chế đầu vào trong các hộp văn bản HTML thành các giá trị số@Pete +1 cho jQuery AlphaNumeric của Paulo P. Bến du thuyền
Khó chịuXin đừng làm điều này. Nó thực sự phiền phức. Xác thực, có. Tuy nhiên, đừng cố gây rối với cách tôi gõ
lại. Hạn chế đầu vào trong các hộp văn bản HTML thành các giá trị sốĐã cập nhật đoạn mã với một số tính năng bổ sung dựa trên phản hồi nhận xét. Đã thêm bàn phím số và cho phép phân tách thập phân/nghìn. Không có nỗ lực định dạng nào được thực hiện.
Làm tốt lắmTác phẩm tuyệt vời - như bạn nói, đó không phải là trình xác thực, mà là công cụ hỗ trợ nhập cảnh.
lại. Hạn chế đầu vào trong các hộp văn bản HTML thành các giá trị sốBạn nên thêm khóa == 110 cho dấu thập phân numpad
lại. Hạn chế đầu vào trong các hộp văn bản HTML thành các giá trị số@Pete - đã thêm, cảm ơn
lại. Hạn chế đầu vào trong các hộp văn bản HTML thành các giá trị sốBản sửa lỗi bổ sung. var decSeparator =".";//or "," (function(jQuery) { function internalCheck(code, ch, key, v) { if (key==code) if (ch==decSeparator) { if (v.indexOf(decSeparator)!=-1) return false; } else { return false; } return true; } jQuery.fn.forceNumeric = function (options) { var opts = jQuery.extend({}, jQuery.fn.forceNumeric.defaults, options); return this.each(function () { var o = jQuery.meta ? jQuery.extend({}, opts, $this.data()) : opts; $(this).keydown(function (e) { var key = e.which || e.keyCode; if (!e.shiftKey && !e.altKey && !e.ctrlKey && // numbers key >= 48 && key <= 57 || // Numeric keypad key >= 96 && key <= 105 || // comma, period and minus, . on keypad ' key == 190 || key == 188 || key == 109 || key == 110 || key == 222 || // Backspace and Tab and Enter key == 8 || key == 9 || key == 13 || // Home and End key == 35 || key == 36 || // left and right arrows key == 37 || key == 39 || // Del and Ins key == 46 || key == 45) { var v=$(this).val(); var tmp =internalCheck(190,".",key,v); if (!tmp) return false; var tmp =internalCheck(188,",",key,v); if (!tmp) return false; return true; } else if (e.ctrlKey){ //ctrl-c ctrl-v ctrl-x if (key==67 || key==86 || key==90) return true; } return false; }); $(this).blur(function (e) { var v=jQuery.trim($(this).val()); if (v=='') { return; } if(o.fixDecimals!=-1) { var num = parseFloat(v); var numSix = num.toFixed(o.fixDecimals); $(this).val(numSix); } }); }); jQuery.fn.forceNumeric.defaults = { fixDecimals : -1 }; }; })(jQuery);
lại. Hạn chế đầu vào trong các hộp văn bản HTML thành các giá trị sốchương trình này hoạt động tốt ngoại trừ việc nó không cho phép nhập các giá trị bàn phím số từ máy tính xách tay vì chúng tôi phải nhấn phím Fn để sử dụng các giá trị đó trên máy tính xách tay Làm cách nào để đặt giá trị mặc định cho loại đầu vào = số trong HTML?Thuộc tính defaultValue của Số đầu vào . Thay đổi giá trị mặc định của trường số. getElementById("myNumber"). defaultValue = "16"; Lấy giá trị mặc định của trường số. getElementById("myNumber"). giá trị mặc định; Một ví dụ cho thấy sự khác biệt giữa thuộc tính defaultValue và value. getElementById("myNumber"); Làm cách nào để đặt xác thực số điện thoại di động trong HTML?Hãy dùng thử . mẫu="[0-9]{3}-[0-9]{3}-[0-9]{4}" bắt buộc> Định dạng. 123-456-7890 |
