javascript - 表現 - replace 使い方 js




JavaScriptを使用してドットを置き換えると、 (4)

type="number"入力が2つ以上ある場合、 $(this).val()は空の文字列を返し.

これを修正するには、 $(this).val()が空の文字列を返さない場合にのみ、値の置換を実行します。

私は奇妙な問題に歩いてきました。 数値入力のドットを置き換えるときに、そのドットだけを置き換えるのではなく、入力全体を消去します。

$("[data-input-payment-id]").on("keyup", function(e) {
  var test_value = $(this).val().replace(/\./g, "");
  $(this).val(test_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

JSFIDDLE

ドットを削除するだけで、どのように変更するのですか?


あなたのKeypressの例は私にこの考えを与えました。 keypressイベントをインターセプトできる場合は、実際の値を追加する前に検証を確認することができます。 また、この例では条件を必要とせず、非桁の値をフィルタできます。

$("[data-input-payment-id]").on("keypress", function(e) {
  if ((this.value + e.key).match(/\D/)) {
    return false;
  }
});
$("[data-input-payment-id]").on("paste", function(e) {
  var pasteData = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
  pasteData = pasteData.replace(/\D/g, '');
  this.value = this.value + pasteData;
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

  • フィルタリングでデータを貼り付けることができます
  • 特定の条件はありません
  • カスタム検証用に変更可能

JSFIDDLE


タイプnumber inputMDNドキュメントを参照してください:

数値を表す数値、または空です

文字列が2つのドットを含む場合など、入力文字列を適切な数値に変換できない場合は、 .valueプロパティにアクセスすると空の文字列が返されます。

.value (およびval()関数)は引き続き文字列を返しますが、これらの文字列は有効な数字を表す必要があります(または空文字列)。 無条件に要素の値を設定するのではなく、最初に値が空の文字列でないかどうかを確認するだけです。

$("[data-input-payment-id]").on("keyup", function(e) {
  const val = $(this).val();
  if (val === '') return;
  var test_value = $(this).val().replace(/\./g, "");
  $(this).val(test_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

あるいは、テキスト入力と、可能であればpattern使用するかもしれません:

$("[data-input-payment-id]").on("keyup", function(e) {
  const val = $(this).val();
  var test_value = $(this).val().replace(/\./g, "");
  $(this).val(test_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input data-input-payment-id="12">
  <input type="submit">
</form>

<form>
<input pattern="^\d+$" data-input-payment-id="12">
<input type="submit">
</form>


私は...するだろう:

  • keyupイベントの代わりに、 inputイベントを待ち受けinput 。 この方法で貼り付けを許可することもできます。
  • 前の正しい値を記録しておくと、ロールバックすることができます。 入力が無効になると(数字として)、 type=number入力の値が空の文字列になるため、これが必要です。 私は以前の正しい値をinput要素のdataプロパティに格納します
  • プロパティvalidity.stepMismatchを使用すると、現在の値がデフォルトで1のinput stepプロパティに違反しているかどうかを知ることができます。ステップの1では、小数点記号を入力すると不一致とみなされます。
  • 末尾の小数点の区切りは小数点以下を返さないため、上記の検証に合格します。 したがって、すべてがOKのときに値を入力に戻します。これにより、キー入力されている可能性のある末尾の小数点記号が削除されます。

$("[data-input-payment-id]").on("input", function (e) {
    if (!this.validity.stepMismatch) {
        $(this).data("lastValid", $(this).val());
    };
    $(this).val($(this).data("lastValid") || "");  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number"data-input-payment-id="12">

これを言って、私は個人的には、このようにしてユーザーの入力をブロックすることには反対していません。キーボードを壊したと思うかもしれません。 私の意見では、ユーザーが何か入力して、入力の横にあるメッセージが入力が有効でない(それまでは)ことを示すだけでよいことが、より良いことです。







regex