web-dev-qa-db-ja.com

<input type = "number">のテキスト入力を無効にします

簡単なウェブアプリを作っています。その一部に、type = "number"の入力ボックスを含めました

<input type="number" min="0">

とにかく、最新のGoogle Chromeブラウザでコードを実行すると、テキストも入力できます。

I entered text in an input type of number

私はユーザーにそれができるようにしたくありません。これをどのように修正する必要がありますか？

htmlvalidationuser-input
9
coder

JavaScriptを使用して（jQueryなどで）特定の文字のみを許可できます：

// Catch all events related to changes
$('#textbox').on('change keyup', function() {
  // Remove invalid characters
  var sanitized = $(this).val().replace(/[^0-9]/g, '');
  // Update value
  $(this).val(sanitized);
});

ここ はフィドルです。

フロートのサポートと同じこと：

// Catch all events related to changes
$('#textbox').on('change keyup', function() {
  // Remove invalid characters
  var sanitized = $(this).val().replace(/[^0-9.]/g, '');
  // Remove the first point if there is more than one
  sanitized = sanitized.replace(/\.(?=.*\.)/, '');
  // Update value
  $(this).val(sanitized);
});

そして ここ は別のフィドルです。

更新：これは必要ないかもしれませんが、これは先頭のマイナス記号を許可するソリューションです。

// Catch all events related to changes
$('#textbox').on('change keyup', function() {
  // Remove invalid characters
  var sanitized = $(this).val().replace(/[^-0-9]/g, '');
  // Remove non-leading minus signs
  sanitized = sanitized.replace(/(.)-+/g, '$1');
  // Update value
  $(this).val(sanitized);
});

番目のフィドル

そして今、有効な小数（浮動小数点数と負の数を含む）のみを許可する最終的な解決策：

// Catch all events related to changes
$('#textbox').on('change keyup', function() {
  // Remove invalid characters
  var sanitized = $(this).val().replace(/[^-.0-9]/g, '');
  // Remove non-leading minus signs
  sanitized = sanitized.replace(/(.)-+/g, '$1');
  // Remove the first point if there is more than one
  sanitized = sanitized.replace(/\.(?=.*\.)/g, '');
  // Update value
  $(this).val(sanitized);
});

最終フィドル

17
Tobias

HTML5入力タイプnumber を使用して、数値エントリのみを制限できます。

<input type="number" name="someid" />

これは、HTML5苦情ブラウザでのみ機能します。 HTMLドキュメントのDoctypeが次のとおりであることを確認してください。

<!DOCTYPE html>

汎用の場合、次のようにJS検証を行うことができます。

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="someid" name="number" onkeypress="return isNumberKey(event)"/>

小数を許可する場合は、「if条件」を次のように置き換えます。

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

ソース： HTMLテキスト入力は数値入力のみを許可します

4
Simpal Kumar