type =“ number”を正の数のみにする方法

現在私は次のコードを持っています

<input type="number" />

こんな感じで出てきます

右側の小さなセレクターにより、数値をマイナスにすることができます。それを防ぐにはどうすればよいですか？

を使用することに疑問type="number"があります。解決するよりも多くの問題が発生していtype="text"ます。とにかくそれをサニティチェックするつもりなので、使用に戻るべきですか？

属性を追加するmin

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

負の数を防ぐ別の解決策を見つけました。

<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">

どれだけ正確になりたいかによります。整数のみを受け入れたい場合：

<input type="number" min="1" step="1">

たとえば、小数点以下2桁の浮動小数点数が必要な場合：

<input type="number" min="0.01" step="0.01">

タグonkeypress内に追加することで、入力に正の整数のみを含めるように強制できinputます。

<input type="number" onkeypress="return event.charCode >= 48" min="1" >

ここでevent.charCode >= 48は、0以上の数値のみが返されるminようにしていますが、タグは、入力バー内をスクロールして最低1に到達できることを保証します。

以下を使用して、type="number"正の数のみを受け入れるようにすることができます。

input type="number" step="1" pattern="\d+"

次のようにして、数値入力フォームでの負の入力を防ぐことができます。

<input type="number" onkeyup="if(this.value<0){this.value= this.value * -1}">

試す

<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">

テキスト入力が必要な場合、パターンも機能します

<input type="text" pattern="\d+">

入力には効果があるがコピーと貼り付けには効果がないため、完璧な解決策が見つかりません。逆の場合もあります。この解決策は私にとってはうまくいきます。負の数を防ぐため、「e」と入力し、「e」のテキストをコピーして貼り付けます。

関数を作成します。

<script language="JavaScript">

  // this prevents from typing non-number text, including "e".
  function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    let charCode = (evt.which) ? evt.which : evt.keyCode;
    if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
      evt.preventDefault();
    } else {
      return true;
    }
  }
</script>

これらのプロパティを入力に追加します。この2つは、「e」を含む非数値テキストのコピーと貼り付けを防止します。有効にするには両方を組み合わせる必要があります。

<input type="number" oninput="validity.valid||(value='');" onpress="isNumber(event)" />

Vue を使用している場合は、この回答をここで参照できます。再利用できるミックスインに抽出しました。

このコードを入力タイプに追加します。

onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"

例えば：

<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />

他の解決策は、Jsを使用して正にすることです（minオプションは無効にでき、ユーザーがsmthを入力すると無効になります）必要でない場合は負で、on（ 'keydown'）イベントも使用できます！

let $numberInput =  $('#whatEverId');
$numberInput.on('change', function(){
    let numberInputText = $numberInput.val();
    if(numberInputText.includes('-')){
        $numberInput.val(Math.abs($numberInput.val()));
    }
});

intフィールドとfloatフィールドのどちらが必要かによって異なります。2つは次のようになります。

<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">

intフィールドには、minが1であるため、正しい検証が関連付けられています。ただし、floatフィールドは0を受け入れます。これに対処するには、制約バリデーターをもう1つ追加します。

function checkIsPositive(e) {
  const value = parseFloat(e.target.value);
  if (e.target.value === "" || value > 0) {
    e.target.setCustomValidity("");
  } else {
    e.target.setCustomValidity("Please select a value that is greater than 0.");
  }
}

document.getElementById("float-field").addEventListener("input", checkIsPositive, false);

JSFiddleはこちら。

これらのソリューションはいずれも、ユーザーが無効な入力を入力しようとするのを完全に防ぐことはできませんが、呼び出しcheckValidityたりreportValidity、ユーザーが有効な入力を入力したかどうかを確認したりできます。

もちろん、ユーザーは常にクライアント側の検証を無視できるため、サーバー側の検証も必要です。

これを試して：

• Angular 8でテスト済み
• 値は正です
• このコードはnull、negitive値と値も扱います。

              <input
                type="number"
                min="0"
                (input)="funcCall()" -- Optional
                oninput="value == '' ? value = 0 : value < 0 ? value = value * -1 : false"
                formControlName="RateQty"
                [(value)]="some.variable" -- Optional
              />

負の数を入力しようとすると、onkeyupイベントがこれをブロックし、入力数の矢印を使用すると、onblurイベントがその部分を解決します。

<input type="number" 
    onkeyup="if(this.value<0)this.value=1"
    onblur="if(this.value<0)this.value=1"
>

テキストタイプの入力では、これを使用してより良い検証を行うことができます。

return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();

これを試して：

Yii2 : Validation rule 

    public function rules() {
    return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
        ];
}