如何触发'；输入更改'；函数依赖于使用javascript的文本框值_Javascript_Jquery_Html

如何触发'；输入更改'；函数依赖于使用javascript的文本框值

javascript jquery html

如何触发'；输入更改'；函数依赖于使用javascript的文本框值,javascript,jquery,html,Javascript,Jquery,Html,我在文本框中使用范围滑块，所以每当我滑动范围时，文本框中的值都会更新。此外，每当我更改textbox中的值时，滑块将相应地移动使用javascript，我还将滑块下部的颜色更改为橙色。当我手动滑动范围时，这非常有效，但在移动滑块时面临问题，这取决于手动文本框值更新。滑块正在移动，但下部颜色未更新。我认为这是因为带量程的on change功能未触发。你能告诉我如何用文本框更新触发它吗我的代码： </head> </head> <body> <inp

我在文本框中使用范围滑块，所以每当我滑动范围时，文本框中的值都会更新。此外，每当我更改textbox中的值时，滑块将相应地移动

使用javascript，我还将滑块下部的颜色更改为橙色。当我手动滑动范围时，这非常有效，但在移动滑块时面临问题，这取决于手动文本框值更新。滑块正在移动，但下部颜色未更新。我认为这是因为带量程的on change功能未触发。你能告诉我如何用文本框更新触发它吗

我的代码：

</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);

});

$（函数（）{
var style=$（“”，{type:“text/css”}）；
$（'#priceText'）.val（$（myrange.val（））；
$（'input[type=“range”]”）。在（'input change'，function（）上{
var val=（$（this.val（）-$（this.attr（'min'））/（$（this.attr（'max'）-$（this.attr（'min'）））；
$（''）.text（'input[type=“range”]：：-webkit slider runnable track{background image:-webkit gradient（线性，左上，右上，颜色停止（'+val+'，橙色），颜色停止（'+val+'，#c5c5））；））。附加到（'head'）；
$（'#priceText'）.val（$（this.val（））；
});
});
$（'#priceText'）.keyup（函数（e）{
var val=$（this）.val（）.replace（//\D/g'，）；//只检查数字
$（'#myrange'）.val（val）；
});

Fiddle:

您只需在

keyup

事件上的范围滑块上触发一个

change

事件

所以

将成为：

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

然后它将正确更新

下面是一个工作示例：

$（函数（）{
var style=$（“”，{type:“text/css”}）；
$（'#priceText'）.val（$（myrange.val（））；
$（'input[type=“range”]”）。在（'input change'，function（）上{
var val=（$（this.val（）-$（this.attr（'min'））/（$（this.attr（'max'）-$（this.attr（'min'）））；
$（''）.text（'input[type=“range”]：：-webkit slider runnable track{background image:-webkit gradient（线性，左上，右上，颜色停止（'+val+'，橙色），颜色停止（'+val+'，#c5c5））；））。附加到（'head'）；
$（'#priceText'）.val（$（this.val（））；
});
});
$（'#priceText'）.keyup（函数（e）{
var val=$（this）.val（）.replace（//\D/g'，）；//只检查数字
$（'#myrange'）.val（val）.trigger（“change”）；
});
input[type=“range”]{
宽度：100%；
高度：28px；
-webkit外观：无；
大纲：无；
边框：0；/*适用于android上的firefox*/
填充：0 8px；/*用于IE*/
利润率：8px0；
}
/*铬与歌剧*/
输入[type=“range”]：-webkit滑块可运行轨迹{
高度：8px；
边界半径：4px；
过渡：0.3s；
背景图像：-webkit渐变(
线性的
左上角，
右上角，
颜色停止（0.15，橙色），
颜色停止（0.15，#C5）
);
}
.myrange:：-webkit滑块可运行轨迹{
背景图像：-webkit渐变(
线性的
左上角，
右上角，
颜色停止（0.15，橙色），
颜色停止（0.15，#C5）
);
高度：8px；/*轨道高度*/
边界半径：4px；/*轨道高度*/
过渡：0.3s；
}
输入[type=“range”]：-webkit滑块拇指{
-webkit外观：无；
背景：橙色；
宽度：28px；
高度：28px；
边界半径：50%；
边缘顶部：-12px；
光标：指针；
过渡：0.3s；
}
编辑文本框值后，您可以触发更改事件：
 var val = $(this).val().replace(/\D/g,'');   // check only for digits
 $('#myrange').val(val);
 $('#myrange').change();

使用事件手动触发#myrange

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


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

});


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


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

});