Number detection

Question

I have a simple input of a number with set values min="1"and max="12", this is used as a clock switch. I would like it to alternate clockwise, so when you get to 12and press the up arrow, it goes back to 1and vice versa.

Right now it basically works for me:

var inputTimer = null;

function cycle(element) {
  if (element.attributes.max && element.attributes.min) {
    var prevVal = element.value;
    inputTimer = setTimeout(function() {
      if (prevVal === element.attributes.max.value) {
        element.value = element.attributes.min.value;
      } else if (prevVal === element.attributes.min.value) {
        element.value = element.attributes.max.value;
      }
    }, 50);
  }
}

$("input[type='number']")
  .on("mousedown", function(e) {
    //this event happens before the 'input' event!
    cycle(this);
  }).on('keydown', function(e) {
    //up & down arrow keys
    //this event happens before the 'input' event!
    if (e.keyCode === 38 || e.keyCode === 40) {
      cycle(this);
    }
  }).on('input', function(e) {
    //this event happens whenever the value changes
    clearTimeout(inputTimer);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" min="1" max="12" value="12" />

Run codeHide result

Working DEMO

The problem I am facing is that I cannot find a way to determine if the arrows were pressed at the input or only at the input as a whole. He has a problem right now when he changes the value, when you click anywhere in the field, when the value is currently equal to 1or12

, / ?

Answer 1

input, :

$('[type=number]').on('input',function(){
  this.value %= 12 ;
  if( this.value < 1 )
    this.value -= -12 ;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=number>

Hide result

Answer 2

, , .

<input type="time" value="01:00" step="600"/>

. , , .

- - http://jdewit.imtqy.com/bootstrap-timepicker/

Answer 3

, , . , , HTML.

workarouds. , , , . , . , , .

var inputTimer = null;

function cycle(event) {
  var value = this.value;
  // Value deep within bonds -> no action
  if(value>this.min && value<this.max) {
    return;  
  }
  // Check coordinate of the mouse
  var x,y;
  //This is the current screen rectangle of input
  var rect = this.getBoundingClientRect();
  var width = rect.right - rect.left;
  var height = rect.bottom-rect.top;
  //Recalculate mouse offsets to relative offsets
  x = event.clientX - rect.left;
  y = event.clientY - rect.top;
  // Now let say that we expect the click only in the last 80%
  // of the input
  if(x/width<0.8) {
    console.log("Not click on arrows.", x, width);  
    return;
  }
  // Check "clicked button" by checking how high on input was clicked
  var percentHeight = y/height;
  // Top arrow was clicked
  if(percentHeight<0.5 && value==this.max) {
      this.value = this.min; 
      event.preventDefault();
      return false;
  }
  // Bottom arrow was clicked
  if(percentHeight>0.5 && value==this.min) {
      this.value = this.max; 
      event.preventDefault();
      return false;
  }
}
var input = document.getElementById("number");
input.addEventListener("mousedown", cycle);

<input id="number" type="number" min="1" max="12" value="12" />

Hide result

Answer 4

, , , , , .toFixed(2) , :

document.getElementById('el').setAttribute('data-last',document.getElementById('el').value);
document.getElementById('el').addEventListener('keyup', function(){
    this.setAttribute('data-last',this.value);
});
document.getElementById('el').addEventListener('click', function(){
    if(this.value>this.getAttribute('data-last')) console.log('up clicked');
    if(this.value<this.getAttribute('data-last')) console.log('down clicked');
});

Answer 5

, , , , , .

Fiddle: http://jsfiddle.net/nusjua9s/4/

JS:

(function($) {

    var methods = {
        cycle: function() {
            if (this.attributes.max && this.attributes.min) {
                var val = this.value;
                var min = parseInt(this.attributes.min.value, 10);
                var max = parseInt(this.attributes.max.value, 10);
                if (val === this.attributes.max.value) {
                    this.value = min + 1;
                } else if (val === this.attributes.min.value) {
                    this.value = max - 1;
                } else if (!(val > min && val < max)) {
                    // Handle values being typed in that are out of range
                    this.value = $(this).attr('data-default');
                }
            }
        }
    };

    $.fn.circularRange = function() {
        return this.each(function() {
            if (this.attributes.max && this.attributes.min) {
                var $this = $(this);
                var defaultVal = this.value;
                var min = parseInt(this.attributes.min.value, 10);
                var max = parseInt(this.attributes.max.value, 10);
                $this.attr('min', min - 1);
                $this.attr('max', max + 1);
                $this.attr('data-default', defaultVal);
                $this.on("change", methods.cycle);
            }
        });
    };

})(jQuery);

$("input[type='number']").circularRange();

HTML:

<input type="number" min="1" max="12" value="12" />

, , , , - , . html . type="number".

Answer 6

$('input [type = "number" ]'). change (function() {});? ?