cman.jp数値のみ入力可能
テキスト域やテキストエリアを数値のみ入力可能にします。
javascriptで数値以外の入力はエラーとする事で、数値のみ入力可能にします。
HTML5より追加された「input type="number"」を指定すると、送信時にチェックが行われ、数値以外の入力はエラーとなるため、javascriptでのチェックは不要です。但し、非対応のブラウザや、動作の異なるブラウザもあるので注意が必要です。
数値以外は、入力そのものを無効とする事も可能です。
数値のみ入力可能とするサンプル（javascript）
入力確定後(カーソル移動時）に、下記javascriptを呼び出し、数値チェック、フォーマットチェックを実施します。
| 数値を入力 | （最大20文字まで入力可能） |
|---|
数値のみ入力可能とするサンプル（javascript isNaN関数使用）
マイナス、小数も数値（false）と判定されるので、特別な考慮は不要です。
※NaN（NOT a Number)は、数値以外の場合true、数値の場合falseとなります。
算術式、論理値（true,false）、null、半角、全角スペースも数値（false）と判定されるなど、判定結果が想定通りか確認が必要です。
入力確定後(カーソル移動時）に、下記javascriptを実行します。
但し、下記サンプルでは、入力値を変数にセットしているため、算術式や論理式は数値以外（true）と判定されます。直接指定のサンプルは、下記「直接指定のサンプル」を使用してください。
変数使用のサンプル
| 数値を入力 | （算術式、論理式は、正しく動作しません） |
|---|
var wstr = str.value;
if(isNaN(wstr)){
alert("半角数字以外入力不可です。");}
}
直接指定のサンプル
算術式や論理式が数値（false）と判定されることが確認できます。
但し、文字を意識してクォーテーション付での指定が必要なため、実際に使用するケースはないと思われます。
入力確定後(カーソル移動時）に、下記にjavascriptを作成後、実行します。
文字はクォーテーション付で指定してください。クォーテーション無の場合エラーとなります。
| 数値を入力 | （エラーの場合、結果が表示されません） |
|---|
数値のみ入力可能とするサンプル（input type="number"）
スピンボタンが表示され上下選択が可能となり、送信(SUBMIT)時に数値チェックが行われます。
非対応のブラウザや、動作の異なるブラウザもあるので注意が必要です。
※input type="number"の詳細な指定方法は、<input type="number">「数値入力」画面を参照下さい。
| 数値を入力 |
|---|
<input type="submit" name="send" value="送信"></form>
数値以外の入力を無効とするサンプル
数値（0～9、マイナス、小数点）以外は、入力確定後(カーソル移動時）に消去されます。
その後、上記「数値のみ入力可能とするサンプル（javascript）」と同様のチェックを実施します。
| 数値を入力 | （最大20文字まで入力可能） |
|---|
var wnum = str.value;
// 数値以外の入力消去
document.getElementById("innum").value=wnum.replace(/[^\d-.]/g,'');
return(str);
}
注意事項
- input type="number"は、マイナス、小数の入力は可能ですが、小数入力をする場合、step属性に小数（0.1など）の指定が必要です。step属性のデフォルトは1のため、step属性指定なしは整数のみ入力可能です。