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 //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  -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