एचटीएमएल 5 इनपुट प्रकार = 'संख्या' - ध्यान और माउस मूल्य-परिवर्तन के बीच अंतर

Question

एचटीएमएल 5 INPUT type='number' उपयोगकर्ता में क्लिक करता है ऊपर/नीचे तीरों कि इनपुट बॉक्स का हिस्सा हैं पर क्लिक करके मूल्य बदल सकते हैं। उपयोगकर्ता फोकस के लिए या इसकी सामग्री को संपादित करने के लिए बॉक्स में भी क्लिक कर सकता है।

click ट्रिगर में इन दोनों गतिविधियों के बीच अंतर करने का कोई आसान तरीका है?

---

@cvsguimaraes उत्तर से, जो सिद्धांत को बेहतर ढंग से प्रदर्शित करता है।

अपनी पद्धति का उपयोग करके, मेरा पूरा (?) संस्करण है। उद्देश्य: सुनिश्चित करें कि नियमित रूप से change डेटा बदलने के लिए +/- का उपयोग करते समय ट्रिगर्स को कॉल किया जाता है।

// input/mouseup triggers to call change from +/- mouse clicks 
// want to wait 500ms before calling change in case successive clicks 
render.inputCh = false; 
render.inputCt = 0; 
render.inputFn = function(e) { 
    render.inputCh = true; 
} 
render.mouseupFn = function(e) { 
    if(render.inputCh) { 
     render.inputCh = false; 
     render.inputCt++; 
     setTimeout(next, 500); 
    }  
    function next() { 
     render.inputCt--; 
     if(render.inputCt) return; 
     var change = document.createEvent("Event"); 
     change.initEvent('change',true,true); 
     e.target.dispatchEvent(change); 
    } 
} 

// using input/mouseup triggers 
document.getElementById('number').addListener('input',render.inputFn,true); 
document.getElementById('number').addListener('mouseup',render.mouseuptFn,true); 

// normal change trigger - will be called normally and via +/- mouse click 
document.getElementById('number').addListener('change',changeFn,false); 

क्रोम यह दोषरहित अब तक सिवाय इसके कि जब आप आइटम से फोकस हटाने change ट्रिगर में फिर से शुरू होगा काम कर रहा है पर। मैंने इसे निम्न स्तर परिवर्तन ट्रिगर करके हल किया है, यदि पिछले परिवर्तन कॉल mouseup से था तो प्रचार को रोकता है।

Answer 1

यह है! उपयोगकर्ता ऊपर/नीचे तीर पर क्लिक करके मान बदलने जब यह oninput से चलाता है, और onmousedown और onmouseup

के बीच

<script> 
    window.onload = function() { 
     changeType = 'none'; 
     var input = document.getElementById('number'); 
     var events = [ 
       "mousedown", 
       "mouseup", 
       "input", 
       "keypress" 
      ]; 
     events.map(function(ev){ 
      input.addEventListener(ev,function(){ 
       switch(ev) { 
       case 'input': 
        if(changeType!='keypress') changeType = 'input'; 
       break; 
       case 'mouseup': 
        switch(changeType) { 
         case 'mousedown': 
          console.log('normal click'); 
         break; 
         case 'keypress': 
          console.log('click with edit via keyboard'); 
         break; 
         case 'input': 
          console.log('click on up/down arrows'); 
         break; 
        } 
       break; 
       default: 
        changeType = ev; 
       break; 
      } 
      },false); 
     }); 
    } 
</script> 
<input type="number" id="number"> 

---

संपादित अब यह भी कुंजीपटल संपादित संभालती है जब माउस दबाया जाता है सुविधा ट्रिगर किए जाने पर।

---

संपादित अब काफी बेहतर है, gion_13 करने के लिए धन्यवाद

Answer 2

Here आप कैसे को पकड़ने और विश्लेषण जो घटनाओं इनपुट और किस क्रम में बदल सकते हैं का एक डेमो है।

एचटीएमएल:

<input type="number" id="number" /> 

स्क्रिप्ट:

var input = document.getElementById('number'), 
    events = [ 
     "click", 
     "mousedown", 
     "mouseup", 
     "focus", 
     "change", 
     "input", 
     "keydown", 
     "keypress", 
     "keyup" 
    ]; 
events.forEach(function(ev) { 
    input.addEventListener(ev, function() { 
     console.log(ev, ' => ', input.value); 
    }, false); 
});