blocks|key|629868|text|使用mouseup和keyup|type|unstyled|depth|inlineStyleRanges|entityRanges|data|629869|$(":input").bind('keyup+mouseup',+function+()+{
++++alert("changed");++++++++++++
});|code-block|syntax|javascript|629870|http://jsfiddle.net/XezmB/2/|offset|length|629871|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>Use mouseup and keyup</p>

<pre><code>$(":input").bind('keyup mouseup', function () {
    alert("changed");            
});
</code></pre>

<p><a href="http://jsfiddle.net/XezmB/2/" rel="noreferrer">http://jsfiddle.net/XezmB/2/</a></p>


blocks|key|414795|text|oninput事件(.bind('input',+fn))涵盖从击键到箭头单击和键盘/鼠标粘贴的所有更改，但在IE+<9中不受支持。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|414796|​|414797|jQuery(function($)+{
++$('#mirror').text($('#alice').val());

++$('#alice').on('input',+function()+{
++++$('#mirror').text($('#alice').val());
++});
});|code-block|syntax|javascript|414798|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input+id="alice"+type="number"+step="any"+value="99">

<p+id="mirror"></p>|414799|414800|entityMap^0|0|7|A|I|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>The <code>oninput</code> event (<code>.bind('input', fn)</code>) covers any changes from keystrokes to arrow clicks and keyboard/mouse paste, but is not supported in IE &lt;9.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(function($) {
  $('#mirror').text($('#alice').val());

  $('#alice').on('input', function() {
    $('#mirror').text($('#alice').val());
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;input id="alice" type="number" step="any" value="99"&gt;

&lt;p id="mirror"&gt;&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|414648|text|http://jsfiddle.net/XezmB/8/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|414649|$(":input").bind('keyup+change+click',+function+(e)+{
++++if+(!+$(this).data("previousValue")+%7C%7C+
+++++++++++$(this).data("previousValue")+!=+$(this).val()
+++++++)
+++{
++++++++console.log("changed");+++++++++++
++++++++$(this).data("previousValue",+$(this).val());
+++}

});


$(":input").each(function+()+{
++++$(this).data("previousValue",+$(this).val());
});​|code-block|syntax|javascript|414650|这有点困难，但是通过这种方式，您可以使用"click“事件来捕获当您使用鼠标通过输入上的小箭头递增/递减时运行的事件。您可以看到我是如何构建一个小小的手动“更改检查”例程的，该例程确保您的逻辑不会触发，除非值实际发生了更改(以防止字段上的简单单击导致的误报)。|414651|entityMap|0|LINK|mutability|MUTABLE|url^0|0|S|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|W|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|4]]]]

<p><a href="http://jsfiddle.net/XezmB/8/">http://jsfiddle.net/XezmB/8/</a></p>

<pre><code>$(":input").bind('keyup change click', function (e) {
    if (! $(this).data("previousValue") || 
           $(this).data("previousValue") != $(this).val()
       )
   {
        console.log("changed");           
        $(this).data("previousValue", $(this).val());
   }

});


$(":input").each(function () {
    $(this).data("previousValue", $(this).val());
});​
</code></pre>

<p>This is a little bit ghetto, but this way you can use the "click" event to capture the event that runs when you use the mouse to increment/decrement via the little arrows on the input.  You can see how I've built in a little manual "change check" routine that makes sure your logic won't fire unless the value actually changed (to prevent false positives from simple clicks on the field).</p>


blocks|key|414859|text|要检测鼠标或键何时被按下，您还可以编写：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|414860|$(document).on('keyup+mouseup',+'#your-id',+function()+{+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++console.log('changed');
});|code-block|syntax|javascript|414861|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>To detect when mouse or key are pressed, you can also write:</p>

<pre><code>$(document).on('keyup mouseup', '#your-id', function() {                                                                                                                     
  console.log('changed');
});
</code></pre>


blocks|key|629938|text|$(':input').bind('click+keyup',+function(){
++++//+do+stuff
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|629939|演示：http://jsfiddle.net/X8cV3/|unstyled|offset|length|629940|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/X8cV3/^0|0|3|Q|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>$(':input').bind('click keyup', function(){
    // do stuff
});
</code></pre>

<p>Demo: <a href="http://jsfiddle.net/X8cV3/" rel="nofollow">http://jsfiddle.net/X8cV3/</a></p>


blocks|key|629914|text|也许有一个更好的解决方案，但这是我想到的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|629915|var+value+=+$("#yourInput").val();
$("#yourInput").on('keyup+change+click',+function+()+{
++++if(this.value+!==+value)+{
++++++++value+=+this.value;
++++++++//Do+stuff
++++}++++++++
});|code-block|syntax|javascript|629916|这是一个working+example。|offset|length|629917|它只是将事件处理程序绑定到keyup、change和click事件。它检查该值是否已更改，如果已更改，则存储当前值，以便下次可以再次检查。该检查是处理click事件所必需的。|style|CODE|629918|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/XezmB/7/^0|0|0|4|F|0|0|D|5|J|6|Q|5|23|5|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@$I|13|J|14|M|N]|$I|15|J|16|M|N]|$I|17|J|18|M|N]|$I|19|J|1A|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>There may be a better solution, but this is what came to mind:</p>

<pre><code>var value = $("#yourInput").val();
$("#yourInput").on('keyup change click', function () {
    if(this.value !== value) {
        value = this.value;
        //Do stuff
    }        
});
</code></pre>

<p>Here's a <a href="http://jsfiddle.net/XezmB/7/" rel="nofollow">working example</a>.</p>

<p>It simply binds an event handler to the <code>keyup</code>, <code>change</code> and <code>click</code> events. It checks whether or not the value has changed, and if so, stores the current value so it can check again next time. The check is required to deal with the <code>click</code> event.</p>


blocks|key|414814|text|$("input[type='number']").bind("focus",+function()+{
++++var+value+=+$(this).val();
++++$(this).bind("blur",+function()+{
++++++++if(value+!=+$(this).val())+{
++++++++++++alert("Value+changed");
++++++++}
++++++++$(this).unbind("blur");
++++});
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|414815|或|unstyled|414816|$("input[type='number']").bind("input",+function()+{
++++alert("Value+changed");
});|414817|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>$("input[type='number']").bind("focus", function() {
    var value = $(this).val();
    $(this).bind("blur", function() {
        if(value != $(this).val()) {
            alert("Value changed");
        }
        $(this).unbind("blur");
    });
});
</code></pre>

<p>OR</p>

<pre><code>$("input[type='number']").bind("input", function() {
    alert("Value changed");
});
</code></pre>


blocks|key|630061|text|我也有同样的问题，我用下面的代码解决了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|630062|HTML|630063|<span+id="current"></span><br>
<input+type="number"+id="n"+value="5"+step=".5"+/>|code-block|syntax|javascript|630064|您可以只添加3个第一行，其他部分是可选的。|630065|$('#n').on('change+paste',+function+()+{
++++$("#current").html($(this).val())+++
});
//+here+when+click+on+spinner+to+change+value,+call+trigger+change
$(".input-group-btn-vertical").click(function+()+{
+++$("#n").trigger("change");
});
//+you+can+use+this+to+block+characters+non+numeric
$("#n").keydown(function+(e)+{
++++//+Allow:+backspace,+delete,+tab,+escape,+enter+and+.
++++if+($.inArray(e.keyCode,+[46,+8,+9,+27,+13,+110,+190])+!==+-1+%7C%7C+(e.keyCode+===+65+&&+e.ctrlKey+===+true)+%7C%7C+(e.keyCode+>=+35+&&+e.keyCode+<=+40))+
+++++++++++return;

++++if+((e.shiftKey+%7C%7C+(e.keyCode+<+48+%7C%7C+e.keyCode+>+57))+&&+(e.keyCode+<+96+%7C%7C+e.keyCode+>+105))+
+++++++e.preventDefault();
});|630066|示例如下：http://jsfiddle.net/XezmB/1303/|offset|length|630067|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/XezmB/1303/^0|0|0|0|0|0|5|V|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>I had same problem and I solved using this code</p>

<p>HTML</p>

<pre><code>&lt;span id="current"&gt;&lt;/span&gt;&lt;br&gt;
&lt;input type="number" id="n" value="5" step=".5" /&gt;
</code></pre>

<p>You can add just 3 first lines the others parts is optional.</p>

<pre><code>$('#n').on('change paste', function () {
    $("#current").html($(this).val())   
});
// here when click on spinner to change value, call trigger change
$(".input-group-btn-vertical").click(function () {
   $("#n").trigger("change");
});
// you can use this to block characters non numeric
$("#n").keydown(function (e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || (e.keyCode === 65 &amp;&amp; e.ctrlKey === true) || (e.keyCode &gt;= 35 &amp;&amp; e.keyCode &lt;= 40)) 
           return;

    if ((e.shiftKey || (e.keyCode &lt; 48 || e.keyCode &gt; 57)) &amp;&amp; (e.keyCode &lt; 96 || e.keyCode &gt; 105)) 
       e.preventDefault();
});
</code></pre>

<p>Example here : <a href="http://jsfiddle.net/XezmB/1303/" rel="nofollow noreferrer">http://jsfiddle.net/XezmB/1303/</a></p>


blocks|key|630108|text|只需用纯javascript编写一个函数，并在HTML代码中调用它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|630109|<input+type="number"+onchange="onChangeFunction(this.value)">|code-block|syntax|javascript|630110|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just write a function in plain javascript and call it in the HTML code:</p>
<pre><code>&lt;input type=&quot;number&quot; onchange=&quot;onChangeFunction(this.value)&quot;&gt;
</code></pre>


<p>How can I handle an onchange for <code>&lt;input type="number" id="n" value="5" step=".5" /&gt;</code> ? I can't do a <code>keyup</code> or <code>keydown</code>, because, the user may just use the arrows to change the value.  I would want to handle it whenever it changes, not just on blur, which I think the <code>.change()</code> event does.  Any ideas?</p>


onchange event for input type="number"

jQuery

如何处理<input type="number" id="n" value="5" step=".5" />的onchange？我不能执行keyup或keydown，因为用户可能只使用箭头来更改值。我希望在它发生变化时处理它，而不仅仅是在模糊上，我认为.change()事件就是这样。有什么想法吗？

问输入号码“type=”的onchange事件
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问输入号码“type=”的onchange事件EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问输入号码“type=”的onchange事件
EN