38

type="number" の入力フィールドを step="100" で使用するとします。奇数を無効にしたくありません。増加または減少を1000の値にしたいだけです。

<input type="number" min="100" max="999999" step="100" />

ユーザーが値「199」を入力して送信すると、値が100で割り切れないため、エラーが発生します。しかし、ステップ値で必要なのは、スピナーの動作を制御することだけです。クリックアップ 199 の値を 200 にしたいし、クリックダウンしたら 100 にしたい。または理想的には、値を 100 で増減させたい.

どうすればいいですか？次のように（jQuery 1.7.2で）無効なイベントを使用してみました：

$( "[type='number']" ).bind( 'invalid', function( e ) {
    var el = $( this ),
      val = el.val( ),
      min = el.attr( 'min' ),
      max = el.attr( 'max' );

    if ( val >= min && val <= max ) {
        return false;
    }
} );

しかし、これによりフォームが送信されません。

PS .: これは、Fedora 16 の Google Chrome 20.0.1132.57 にあります。

4

8 に答える 8

9

まず、この非常に興味深い質問に感謝します。問題の解決策を検索することで、HTML5 の検証について多くのことを学びました。

調査の結果、HTML5 フォーム検証 API には興味深い一連の読み取り専用のプロパティがあることがわかりましたが、必要なことを行うには非常に便利です。

novalidateあなたの問題に対する私のアプローチは、最初に属性をフォーム要素に追加して、検証をトリガーするタイミングを制御し、次にvalidity入力に添付されたオブジェクトを読み取って、どの検証エラーがあるかを正確に知ることでした。唯一のエラーはstepMismatch(これが 199 などの数字の無効性を引き起こすものです)、すべての検証プロセスをバイパスできます。それ以外の場合は、 reportValidity()メソッドを使用して通常の HTML 検証動作を示すことができます。

これが私が思いついたコードです。あなたが望むことを願っています：

var form = document.querySelector("form")       // Get the form
var input = document.querySelector("#myInput")  // Get the input to validate

form.addEventListener("submit", function(e) {
	e.preventDefault()  // Catch the submit
  // Do the magic
  if(onlyStepMatters(input.validity)){
  	form.submit()
  }else {
  	form.reportValidity()
  }
})

function onlyStepMatters(validityState) {
  return !(
    validityState.badInput || validityState.customError || validityState. patternMismatch || validityState.rangeOverflow || validityState.rangeUnderflow || validityState.tooLong || validityState.tooShort || validityState.typeMismatch || validityState.valueMissing
    )
    
  /* This is what the object looks like, notice I just skipped the stepMismatch */
  /*
  {
    badInput,
    customError,
    patternMismatch,
    rangeOverflow,
    rangeUnderflow,
    stepMismatch,
    tooLong,
    tooShort,
    typeMismatch,
    valid,
    valueMissing,
  }
  */
}
<form novalidate>
<input type="number" id="myInput" min="0" max="1000" step = "100" placeholder="Enter a number" required/>
<button type="submit">Send</button> 
</form>

このコードをリファクタリングして、同じロジックに基づいてより簡潔にすることができると確信していますが、それについて詳しく考える時間がありません。

建設的なコメントをいただければ幸いです。

お役に立てれば。

于 2018-07-29T13:13:32.813 に答える
7

stepと検証は密接に結びついているので、できないと思います。stepUp()将来的には、およびstepDown()関数をオーバーライドして、説明した動作を取得できるようになる可能性がありますが、これがこれらの意図された使用例であるかどうかは調査していません。WHATWG メーリング リストに投稿して、それらの機能について具体的に質問し、ユース ケースを説明することをお勧めします。

現在の実用的な目的のために、キャプチャstep=1するイベントを設定してバインドしようとしましたか? clickおそらく「上」と「下」のクリックの区別に問題があることがわかりますが、それは克服できる可能性があります。textただし、入力を使用し、pattern属性を適切に設定し、独自のスピナーを実装する方が簡単かもしれません。

于 2012-07-31T13:45:56.407 に答える
1

私はこれを達成しようとして、あなたのコードで少し遊んでいます:

理想的には、値を 100 の値で増減させたい

…そして最終的に次のようなスクリプトが作成されました。

  • キーボードまたはマウスによるステップの増減を検出し、
  • 変数を使用しremainderて計算結果を格納します: value % 100,
  • stepのパラメータと をvalue修正してinputください
  • remainderキーボードまたはマウスのイベントが終了したときに変数を元に戻し、stepパラメーターをリセットして元に戻します1(送信できるようにする必要があります)。

この作業中のスニペットでは、100 で割り切れない数値から始めて、矢印 (キーボードまたはマウス) を使用して入力値を変更してみてください。

var remainder = false;
var stepbefore;

$("[type='number']").bind('keydown mousedown', function() {
  // If keyboard Up or Down arrow keys or mouse left button on the arrows
  if (event.keyCode == 38 || event.keyCode == 40 || event.button === 0) {
    // If there is already a change running, exit the function
    if (remainder !== false) return;

    var myStep = this.getAttribute("stepcustom"); // Get my "stepcustom" attribute
    remainder = this.value % myStep;
    this.value = Math.floor(this.value / myStep) * myStep;
    stepbefore = this.step;
    this.step = myStep;
  }
});

$("[type='number']").bind('keyup mouseup', function() {
  if (remainder !== false) {
    this.value = +(this.value) + remainder;
    this.step = stepbefore;
    remainder = false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form>
  <input type="number" min="100" max="999999" step="1" stepcustom="100" />
  <input type="submit" />
</form>

それが役に立てば幸い。

于 2018-07-25T14:27:54.517 に答える
0

change() 関数を使用してみてください ...

<form>
    <input type="number" id="number" min="100" max="999999" step="100" />
</form>

$(document).ready(function(){
    $("#number").change(function(a){
        if ($(this).val() % 100 === 0) {
            /* Do something when the number is even */ 
            console.log("EVEN");
        } else {
            /* Or when it's odd (isn't dividable by 100), do ... whatever */ 
            console.log("ODD");
        }
    })
});

そして、あなたが望む例のように、ブートストラップを使用してテストしていました。ユーザーがクリックすると値が200になり(199から)、ユーザーがクリックすると値が100になります

分割可能を変更するには:

if ($(this).val() % 100 === 0) { //Change 100 with what ever you want
于 2018-07-31T05:49:28.883 に答える
0

This is a simple javascript function that could help you out
where prev_num is global variable
this will work for increment and decrement both

var perv_num=0;
function ax(z)
{

     let def;
     let mul=10;
     let valu;
     let valucopy=parseInt(z.value);
     let  frst;
     valucopy=((valucopy+100)%100);


         if (parseInt( z.value)<100) 
         {
                  document.getElementById("myNumber").value="";
                  document.getElementById("myNumber").value=100;
         }
         else if(parseInt( z.value)<perv_num)
        {
                  def=parseInt( z.value.length);
                  mul=Math.pow(mul,def-1);
                  frst=(parseInt(z.value[0])*mul);
                  document.getElementById("myNumber").value="";
                  document.getElementById("myNumber").value=frst;
         }
         else if(valucopy  ==0)
         {
                  document.getElementById("myNumber").value="";
                 document.getElementById("myNumber").value=parseInt(z.value)+100;
          }
          else{
                  def=parseInt( z.value.length);
                  mul=Math.pow(mul,def-1);
                  frst=(parseInt(z.value[0])*mul);
                  valu=Math.abs( parseInt(z.value)-frst);
                  valu=100-valu;
                  var number=(parseInt(z.value)+valu);
                  document.getElementById("myNumber").value="";
                  document.getElementById("myNumber").value= number;
              }
              perv_num=parseInt( z.value);
}

and html is like

    <input type="number" id="myNumber" onchange="ax(this)">

fiddle is https://jsfiddle.net/ecpy5gr0/1

于 2018-07-31T08:01:58.807 に答える