web-dev-qa-db-fra.com

Écouteur d'entrée de plage JQuery

Hey avoir un peu de mal à jquery et la gamme hmtl5. J'essaie d'obtenir les valeurs telles qu'elles ont été modifiées, mais l'écouteur d'événements ne les capture pas. Actuellement, mon code est:

HTML

html += '<li>Apply Credits: <input type="range"  min="0" max="'+credits+'" name="discount_credits" id="discount_credits" /> <span>'+credits+'</span></li>'

Et le JS c'est:

$('#discount_credits').mousewheel( function() { 
        alert('it changed!'); 
        alert('new value = ' + $(this).val()); 
    });

J'ai aussi essayé

$('#discount_credits').change( function() { 
            alert('it changed!'); 
            alert('new value = ' + $(this).val()); 
        });

Ni semblent fonctionner. Est-ce que je fais quelque chose de mal?

javascriptjqueryhtml5range
19
Devin Dixon
$('input[type=range]').on('input', function () {
    $(this).trigger('change');
});

Cela déclenche l'événement change sur chaque événement input.

22
Brian

Ne semble pas avoir de problème avec HTML5 <input type="range"> en utilisant change.

Voir: http://jsfiddle.net/DerekL/BaEar/33/

12
Derek 朕會功夫

Je suppose que votre étendue a un identifiant: <span id="slidernumber">...</span> Supposons également que vous ayez quelques curseurs et que vous souhaitiez modifier le texte si l'un d'entre eux était déplacé:

<li>
Apply Credits1: 
<input type="range" min="0" max="100" 
name="discount_credits1" id="discount_credits" 
/>
</li>

<li>
Apply Credits2: 
<input type="range" min="0" max="100" 
name="discount_credits2" id="discount_credits" 
/>
</li>

<span id="slidernumber">50</span>

Essaye ça:

$(document).ready(function(){
  $("[type=range]").change(function(){
    var newval=$(this).val();
    $("#slidernumber").text(newval);
  });
});

http://jsfiddle.net/MahshidZeinaly/CgQ5c/

Supposons maintenant que vous ayez quelques curseurs, mais que vous souhaitiez voir un texte changer si l'un d'entre eux avait été déplacé. (Je le suppose parce que la plage d'entrée est à l'intérieur de la balise li, et vous lui avez donné un nom):

<li>
Apply Credits1: 
<input type="range" min="0" max="100" 
name="discount_credits1" id="discount_credits" 
/>
<span id="slidernumber">50</span>
</li>

<li>
Apply Credits2: 
<input type="range" min="0" max="100" 
name="discount_credits2" id="discount_credits" 
/>
<span id="slidernumber">50</span>
</li>

Essaye ça:

$(document).ready(function(){
  $("[type=range]").change(function(){
    var newv=$(this).val();
    $(this).next().text(newv);
  });
});

http://jsfiddle.net/MahshidZeinaly/2pe7P/1/

4
Mahshid Zeinaly

L'événement on change semble fonctionner correctement pour moi: http://jsfiddle.net/zV3xD/7/

<input type="range"  min="0" max="100" name="discount_credits" id="discount_credits" />

<span id="newValue" value="0">0</span>

$('#discount_credits').change( function() {
    var newValue = this.value;        
    $('#newValue').html(newValue);
});​

Ou vous pouvez essayer quelque chose comme this :

<form oninput="result.value=parseInt(a.value)">
    <input type="range" name="a" value="50" /> =
    <output name="result">0</output>
</form>

Utilisation de l'exemple output ici: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output

1
Chase

Plusieurs test et bug corrigés!

$('input[name=form_range]').change('mousestop',function () {

});
0
Naelson Gonçalves Saraiva