logo标签列表

如何使用JavaScript根据文本框的值触发“输入更改”函数

javascriptjqueryhtml
5
我正在使用带有文本框的范围滑块，因此每当我滑动范围时，文本框中的值会更新。同样，每当我更改文本框中的值时，滑块也会相应地移动。
使用JavaScript，我还将滑块下方的颜色更改为橙色。当我手动滑动范围时，这工作得非常完美，但是在根据手动文本框值更新移动滑块时遇到了问题。滑块正在移动，但是下部颜色没有更新。我认为这是由于与范围的onChange函数未触发所致。 请问您如何在文本框更新时触发它？
我的代码：
</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);

});

Fiddle : https://fiddle.jshell.net/anoopcr/o07tu661/3/

可以用来测试和调试代码。它提供了一个基于浏览器的集成开发环境，可以运行 HTML、CSS 和 JavaScript 代码，并且还可以模拟 HTTP 请求和响应。在 Fiddle 上，您可以轻松地创建和共享代码示例，以便其他人能够查看和理解您的代码。
3个回答
3

您只需要在范围滑块上触发change事件，该事件与keyup事件相对应。

因此，

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

Would become:

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

然后它将正确更新。这里有一个可行的例子： 

$(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");
  
});
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;

}
<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>

0
你可以在编辑文本框的值之后触发change事件：
 var val = $(this).val().replace(/\D/g,'');   // check only for digits
 $('#myrange').val(val);
 $('#myrange').change();
0
使用.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/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接