Hướng dẫn prevent non numeric input javascript - ngăn javascript đầu vào không phải dạng số

85

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Sử dụng

document.querySelector("input").addEventListener("keypress", function (e) {
    var allowedChars = '0123456789.';
    function contains(stringValue, charValue) {
        return stringValue.indexOf(charValue) > -1;
    }
    var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
            || e.key === '.' && contains(e.target.value, '.');
    invalidKey && e.preventDefault();});

1 sẽ khiến

document.querySelector("input").addEventListener("keypress", function (e) {
    var allowedChars = '0123456789.';
    function contains(stringValue, charValue) {
        return stringValue.indexOf(charValue) > -1;
    }
    var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
            || e.key === '.' && contains(e.target.value, '.');
    invalidKey && e.preventDefault();});

2 bên trong trình nghe sự kiện trả lại một chuỗi trống nếu đầu vào không phải là số hợp lệ. Bạn có thể thấy một ví dụ về điều này tại http://jsfiddle.net/fsy53/

Tuy nhiên, các ký tự không hợp lệ vẫn được hiển thị trong đầu vào.

Có cách nào để có được giá trị thực sự được hiển thị, bao gồm các ký tự không hợp lệ, từ trong một trình nghe sự kiện?

Mục tiêu cuối cùng của tôi là ngăn người dùng thực sự gõ bất kỳ ký tự không phải là người nào vào trường. Tôi cần sử dụng

document.querySelector("input").addEventListener("keypress", function (e) {
    var allowedChars = '0123456789.';
    function contains(stringValue, charValue) {
        return stringValue.indexOf(charValue) > -1;
    }
    var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
            || e.key === '.' && contains(e.target.value, '.');
    invalidKey && e.preventDefault();});

3 để bàn phím ảo được sử dụng bởi các thiết bị di động. Mục tiêu của tôi là làm một cái gì đó như

document.querySelector("input").addEventListener("keypress", function (e) {
    var allowedChars = '0123456789.';
    function contains(stringValue, charValue) {
        return stringValue.indexOf(charValue) > -1;
    }
    var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
            || e.key === '.' && contains(e.target.value, '.');
    invalidKey && e.preventDefault();});

4 trên

document.querySelector("input").addEventListener("keypress", function (e) {
    var allowedChars = '0123456789.';
    function contains(stringValue, charValue) {
        return stringValue.indexOf(charValue) > -1;
    }
    var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
            || e.key === '.' && contains(e.target.value, '.');
    invalidKey && e.preventDefault();});

5, nhưng điều này không hoạt động bởi vì nếu một ký tự không hợp lệ được gõ, hãy đọc từ

document.querySelector("input").addEventListener("keypress", function (e) {
    var allowedChars = '0123456789.';
    function contains(stringValue, charValue) {
        return stringValue.indexOf(charValue) > -1;
    }
    var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
            || e.key === '.' && contains(e.target.value, '.');
    invalidKey && e.preventDefault();});

2 trả về

document.querySelector("input").addEventListener("keypress", function (e) {
    var allowedChars = '0123456789.';
    function contains(stringValue, charValue) {
        return stringValue.indexOf(charValue) > -1;
    }
    var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
            || e.key === '.' && contains(e.target.value, '.');
    invalidKey && e.preventDefault();});

7.

Đã hỏi ngày 13 tháng 11 năm 2013 lúc 23:14Nov 13, 2013 at 23:14

Thuốc nổ PillsexplosionExplosion Pills

185K49 Huy hiệu vàng318 Huy hiệu bạc395 Huy hiệu Đồng49 gold badges318 silver badges395 bronze badges

8

Hãy thử ngăn chặn hành vi mặc định nếu bạn không thích giá trị khóa đến:

document.querySelector("input").addEventListener("keypress", function (evt) {
    if (evt.which < 48 || evt.which > 57)
    {
        evt.preventDefault();
    }
});

Đã trả lời ngày 13 tháng 11 năm 2013 lúc 23:30Nov 13, 2013 at 23:30

11

Bạn có thể thực hiện điều này bằng cách ngăn chặn sự kiện Keypress xảy ra cho các giá trị không phải là số

ví dụ (sử dụng jQuery)

$('.input-selector').on('keypress', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

Điều này chiếm tất cả các loại đầu vào khác nhau (ví dụ: đầu vào từ số pad có các mã khác nhau so với bàn phím) cũng như backspace, khóa mũi tên, điều khiển/cmd + r để tải lại, v.v.

Redithion

9561 Huy hiệu vàng19 Huy hiệu bạc31 Huy hiệu đồng1 gold badge19 silver badges31 bronze badges

Đã trả lời ngày 4 tháng 12 năm 2014 lúc 16:43Dec 4, 2014 at 16:43

Dlangevindlangevindlangevin

3443 Huy hiệu bạc7 Huy hiệu đồng3 silver badges7 bronze badges

3

Xin lưu ý rằng E.Which, E.KeyCode và E.Charcode không được dùnge.which, e.keyCode and e.charCode are deprecated: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

Tôi thích e.key:e.key:

document.querySelector("input").addEventListener("keypress", function (e) {
    var allowedChars = '0123456789.';
    function contains(stringValue, charValue) {
        return stringValue.indexOf(charValue) > -1;
    }
    var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
            || e.key === '.' && contains(e.target.value, '.');
    invalidKey && e.preventDefault();});

Hàm này không can thiệp vào các mã điều khiển trong Firefox (Backspace, Tab, v.v.) bằng cách kiểm tra độ dài chuỗi:

document.querySelector("input").addEventListener("keypress", function (e) {
    var allowedChars = '0123456789.';
    function contains(stringValue, charValue) {
        return stringValue.indexOf(charValue) > -1;
    }
    var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
            || e.key === '.' && contains(e.target.value, '.');
    invalidKey && e.preventDefault();});

8.

Nó cũng ngăn chặn các dấu chấm trùng lặp ở đầu và giữa các chữ số:

document.querySelector("input").addEventListener("keypress", function (e) {
    var allowedChars = '0123456789.';
    function contains(stringValue, charValue) {
        return stringValue.indexOf(charValue) > -1;
    }
    var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
            || e.key === '.' && contains(e.target.value, '.');
    invalidKey && e.preventDefault();});

9

Thật không may, nó không ngăn được nhiều chấm vào cuối:

function allowOnlyNumbers(event) {
  if (event.key.length === 1 && /\D/.test(event.key)) {
    event.preventDefault();
  }
}

0

Dường như không có cách nào để đối phó với nó.

Nrzonline

1.5902 Huy hiệu vàng18 Huy hiệu bạc37 Huy hiệu đồng2 gold badges18 silver badges37 bronze badges

Đã trả lời ngày 15 tháng 3 năm 2017 lúc 9:54Mar 15, 2017 at 9:54

Pavokpavokpavok

3803 Huy hiệu bạc10 Huy hiệu Đồng3 silver badges10 bronze badges

2

Các câu trả lời khác có vẻ phức tạp hơn mức cần thiết, vì vậy tôi đã điều chỉnh câu trả lời của họ cho chức năng ngắn và ngọt ngào này.

function allowOnlyNumbers(event) {
  if (event.key.length === 1 && /\D/.test(event.key)) {
    event.preventDefault();
  }
}

Nó sẽ không thay đổi hành vi của bất kỳ mũi tên, nhập, dịch chuyển, CTRL hoặc tab nào vì độ dài của thuộc tính chính cho các sự kiện đó dài hơn một ký tự. Nó cũng sử dụng một biểu thức thông thường đơn giản để tìm kiếm bất kỳ ký tự không phải chữ số nào.

Đã trả lời ngày 21 tháng 8 năm 2019 lúc 19:28Aug 21, 2019 at 19:28

1

inputs[5].addEventListener('keydown', enterNumbers);

function enterNumbers(event) {
  if ((event.code == 'ArrowLeft') || (event.code == 'ArrowRight') ||
     (event.code == 'ArrowUp') || (event.code == 'ArrowDown') || 
     (event.code == 'Delete') || (event.code == 'Backspace')) {
     return;
  } else if (event.key.search(/\d/) == -1) {
    event.preventDefault();
  }
}

Trong trường hợp này, giá trị của trường đầu vào vẫn còn nguyên khi nhấn nút không số, và vẫn xóa, backspace, mũi tên-xuống-bên trái hoạt động đúng và có thể được sử dụng để sửa đổi đầu vào kỹ thuật số.

Đã trả lời ngày 3 tháng 6 năm 2017 lúc 20:11Jun 3, 2017 at 20:11

Giải pháp này dường như đang hoạt động tốt cho tôi. Nó được xây dựng trên giải pháp của @pavok bằng cách bảo tồn các lệnh khóa CTRL.

document.querySelector("input").addEventListener("keypress", function (e) {
  if (
    e.key.length === 1 && e.key !== '.' && isNaN(e.key) && !e.ctrlKey || 
    e.key === '.' && e.target.value.toString().indexOf('.') > -1
  ) {
    e.preventDefault();
  }
});

Đã trả lời ngày 11 tháng 4 năm 2018 lúc 16:38Apr 11, 2018 at 16:38

Pigeontoepigeontoepigeontoe

4263 Huy hiệu bạc8 Huy hiệu Đồng3 silver badges8 bronze badges

thử cái này:

1. Nhấn khóa hiện tại ->

   function allowOnlyNumbers(event) {
     if (event.key.length === 1 && /\D/.test(event.key)) {
       event.preventDefault();
     }
   }
   

   1
2. Nếu

   function allowOnlyNumbers(event) {
     if (event.key.length === 1 && /\D/.test(event.key)) {
       event.preventDefault();
     }
   }
   

   1 không phải là số ->

   function allowOnlyNumbers(event) {
     if (event.key.length === 1 && /\D/.test(event.key)) {
       event.preventDefault();
     }
   }
   

   3
3. Khi điều kiện là đúng, vì vậy hành động mặc định không nên được thực hiện như bình thường ->

   function allowOnlyNumbers(event) {
     if (event.key.length === 1 && /\D/.test(event.key)) {
       event.preventDefault();
     }
   }
   

   4
4. khác, trả về hành động mặc định ...

   function allowOnlyNumbers(event) {
     if (event.key.length === 1 && /\D/.test(event.key)) {
       event.preventDefault();
     }
   }
   

   1

input.addEventListener("keypress", function (e) {
  if (isNaN(e.key)) e.preventDefault();
});

Đã trả lời ngày 25 tháng 4 lúc 13:56Apr 25 at 13:56

4

Cập nhật câu trả lời được chấp nhận:

Bởi vì nhiều tài sản trở nên không được

(Thuộc tính) Bàn phí

Bạn chỉ nên dựa vào tài sản chính và tự tạo phần còn lại của logic:key property and create the rest of the logic by yourself:

Mã cho phép Enter, Backspace và tất cả các số [0-9], mọi ký tự khác đều không được phép.

document.querySelector("input").addEventListener("keypress", ({ key, preventDefault }) => {
  if (isNaN(parseInt(key, 10)) && !['Backspace', 'Enter'].includes(key)) {
      preventDefault();
    }
});

Lưu ý điều này sẽ vô hiệu hóa hành động dán This will disable paste action

Đã trả lời ngày 23 tháng 8 năm 2019 lúc 7:15Aug 23, 2019 at 7:15

Eugen Suniceugen SunicEugen Sunic

12.6k8 Huy hiệu vàng63 Huy hiệu bạc81 Huy hiệu Đồng8 gold badges63 silver badges81 bronze badges

Tôi cũng sẽ thêm metakey, vì tôi đang sử dụng macOS

input.addEventListener("keypress", (e) => {
    const key = e.key;
    if (!(e.metaKey || e.ctrlKey) && key.length === 1 && !/\d\./.test(key)) {
        e.preventDefault();
    }
}

Hoặc, bạn có thể thử

function allowOnlyNumbers(event) {
  if (event.key.length === 1 && /\D/.test(event.key)) {
    event.preventDefault();
  }
}

6

Đã trả lời ngày 4 tháng 4 năm 2019 lúc 18:59Apr 4, 2019 at 18:59

PolvpolvPolv

1.7161 Huy hiệu vàng17 Huy hiệu bạc31 Huy hiệu đồng1 gold badge17 silver badges31 bronze badges

Dựa trên câu trả lời của Nrzonline: Tôi đã khắc phục vấn đề của nhiều "." ở cuối đầu vào bằng cách thêm một

let lastCharacterEntered

ngoài đầu vào và sau đó là Onkeypress

$('.input-selector').on('keypress', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

0

Đã trả lời ngày 25 tháng 3 năm 2020 lúc 10:00Mar 25, 2020 at 10:00

Tôi chỉ gặp vấn đề tương tự và phát hiện ra một giải pháp thay thế bằng API xác thực - hoạt động không có ma thuật đen trong tất cả các trình duyệt chính (Chrome, Firefox, Safari) ngoại trừ IE. Giải pháp này chỉ đơn giản là ngăn người dùng nhập các giá trị không hợp lệ. Tôi cũng bao gồm một dự phòng cho IE, điều này không đẹp nhưng ít nhất là hoạt động.

Bối cảnh: Hàm OnInput được gọi là trên các sự kiện đầu vào, setInputValue được sử dụng để đặt giá trị của phần tử đầu vào, trước đó, trước đó chứa giá trị đầu vào hợp lệ cuối cùng (được cập nhật trong các cuộc gọi setInputValue).onInput function is called on input events, setInputValue is used to set the value of the input element, previousInputValue contains the last valid input value (updated in setInputValue calls).

$('.input-selector').on('keypress', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

1

Đã trả lời ngày 6 tháng 5 năm 2020 lúc 8:22May 6, 2020 at 8:22

Ábel Énekesábel ÉnekesÁbel Énekes

Phim huy hiệu bạc 21711 silver badge10 bronze badges

Ngăn chặn việc gõ không alphabet vào ID đầu vào cụ thể cho các trang có nhiều hơn một mục đầu vào. Nó có thể sử dụng cho các nhà phát triển Oracle Apex --- Phụ lục trong tiêu đề HTML của trang của trang

$('.input-selector').on('keypress', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

2

- Phụ lục trong trang HTML Thuộc tính cơ thể OnKeyDown = "Validatenumber (Sự kiện);"

Đã trả lời ngày 13 tháng 9 năm 2021 lúc 6:43Sep 13, 2021 at 6:43

Dưới đây là giải pháp đơn giản của tôi chỉ đơn giản trong giải pháp này, bạn nên giữ loại đầu vào để nhắn tin để khi bạn sử dụng

function allowOnlyNumbers(event) {
  if (event.key.length === 1 && /\D/.test(event.key)) {
    event.preventDefault();
  }
}

7, bạn sẽ nhận được toàn bộ chuỗi không chỉ không chỉ các số hoặc chuỗi trống thay thế để bạn thực sự có thể kiểm tra xem có điểm nào hay không. Và tôi đã không sử dụng các thuộc tính không dùng nữa

function allowOnlyNumbers(event) {
  if (event.key.length === 1 && /\D/.test(event.key)) {
    event.preventDefault();
  }
}

8

$('.input-selector').on('keypress', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

3

`` `

$('.input-selector').on('keypress', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

4

$('.input-selector').on('keypress', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

5

Đã trả lời ngày 1 tháng 5 lúc 0:04May 1 at 0:04

Cái này nên làm việc. Chỉ hoạt động với số nguyên.integers.

$('.input-selector').on('keypress', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

6

Tuy nhiên, bạn có thể triển khai phao với một vài dòng nữa:

$('.input-selector').on('keypress', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

7

Cuối cùng sử dụng nó như:

$('.input-selector').on('keypress', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

8

Đã trả lời ngày 17 tháng 9 lúc 2:52Sep 17 at 2:52

Sajidur Rahmansajidur RahmanSajidur Rahman

2.4641 Huy hiệu vàng25 Huy hiệu bạc26 Huy hiệu đồng1 gold badge25 silver badges26 bronze badges

Một giải pháp phản ứng rất đẹp ... bạn chỉ muốn tiêu thụ sự kiện nếu Nan của nó

$('.input-selector').on('keypress', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

9

Đã trả lời ngày 29 tháng 3 lúc 17:39Mar 29 at 17:39

AustBrinKaustbrinkaustBrink

11 Huy hiệu bạc1 Huy hiệu đồng1 silver badge1 bronze badge

Thử nó:

document.querySelector("input").addEventListener("keypress", function (e) {
    var allowedChars = '0123456789.';
    function contains(stringValue, charValue) {
        return stringValue.indexOf(charValue) > -1;
    }
    var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
            || e.key === '.' && contains(e.target.value, '.');
    invalidKey && e.preventDefault();});

0

Đã trả lời ngày 13 tháng 11 năm 2013 lúc 23:26Nov 13, 2013 at 23:26

DukedukeDuke

2.9671 Huy hiệu vàng17 Huy hiệu bạc22 Huy hiệu đồng1 gold badge17 silver badges22 bronze badges

1

Làm thế nào để chỉ cho phép các số trong trường đầu vào trong javascript?

Làm thế nào để bạn hạn chế đầu vào chỉ có số?

Làm thế nào để bạn ngừng gõ vào số loại đầu vào?

Làm thế nào để chỉ chấp nhận số trong trường văn bản?