Question

我正在使用带有文本框的范围滑块，因此每当我滑动范围时，值都会在文本框中更新。每当我更改文本框中的值时，滑块也会相应移动。

使用javascript，我也将滑块较低的颜色更改为橙色。当我手动滑动范围但面临问题时，移动滑块取决于手动文本框值更新，这是完美的。滑块正在移动，但下部颜色未更新。我认为这是因为改变功能与范围不触发。你能告诉我如何通过文本框更新来触发它吗？

我的代码：

</head>
</head>

<body>
<input type="range" min="1" max="100" step=".1" value="15"id="myrange" class="myrange">
<input type="text" id="priceText"></input>
</body>

使用Javascript：

$(function() {
var style = $("<style>", {type:"text/css"}).appendTo("head");
$('#priceText').val($(myrange).val());

 $('input[type="range"]').on('input change', function() {

 var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
 $('<style type="text/css"></style>').text('input[type="range"]::-webkit-slider-runnable-track { background-image:-webkit-gradient(linear, left top, right top, color-stop('+val+', orange), color-stop('+val+', #C5C5C5));}').appendTo('head');

$('#priceText').val($(this).val()); 



  });
});


$('#priceText').keyup(function(e){


      var val = $(this).val().replace(/\D/g,'');   // check only for digits
      $('#myrange').val(val);

});

小提琴：https://fiddle.jshell.net/anoopcr/o07tu661/3/

Answer 1

您只需要在change事件的范围滑块上触发keyup事件

所以

$('#myrange').val(val);

会变成：

$('#myrange').val(val).trigger("change");

然后它会正确更新。

这是一个有效的例子：

＆＃13;

$(function() {
var style = $("<style>", {type:"text/css"}).appendTo("head");
$('#priceText').val($(myrange).val());
  $('input[type="range"]').on('input change', function() {

 var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
 $('<style type="text/css"></style>').text('input[type="range"]::-webkit-slider-runnable-track { background-image:-webkit-gradient(linear, left top, right top, color-stop('+val+', orange), color-stop('+val+', #C5C5C5));}').appendTo('head');
 
$('#priceText').val($(this).val()); 
	
	

  });
});


$('#priceText').keyup(function(e){


      var val = $(this).val().replace(/\D/g,'');   // check only for digits
      $('#myrange').val(val).trigger("change");
  
});

＆＃13;

input[type="range"] {
    width: 100%;
    height: 28px;
    -webkit-appearance: none;
    outline: none;
    border: 0; /*for firefox on android*/
    padding: 0 8px; /*for IE*/
    margin: 8px 0;
		
}

/*chrome and opera*/
input[type="range"]::-webkit-slider-runnable-track {

    height: 8px;
    border-radius: 4px;
    transition: 0.3s;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.15, orange),
        color-stop(0.15, #C5C5C5)
    );
}

.myrange::-webkit-slider-runnable-track {
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.15, orange),
        color-stop(0.15, #C5C5C5)
    );
    height: 8px; /*trackHeight*/
    border-radius: 4px; /*trackHeight*/
    transition: 0.3s;

}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: orange;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-top: -12px;
    cursor: pointer; 
    transition: 0.3s;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="1" max="100" step=".1" value="15"id="myrange" class="myrange">
<input type="text" id="priceText"></input>

＆＃13;

Answer 2

您可以在修改文本框值后触发change事件：

 var val = $(this).val().replace(/\D/g,'');   // check only for digits
 $('#myrange').val(val);
 $('#myrange').change();

Answer 3

使用.trigger()事件在#myrange

上手动触发更改事件

$('#priceText').keyup(function(e){


      var val = $(this).val().replace(/\D/g,'');   // check only for digits
      $('#myrange').val(val);
      $('#myrange').trigger('change');

});

https://fiddle.jshell.net/o07tu661/8/

如何触发'输入更改'功能取决于使用javascript的文本框值

3 个答案: