用户在textarea唯一数据中输入时更改处理程序值 [英] Change handler value when user input in textarea unique data

问题描述

我为Yii2使用bootstrap-slider Kartik扩展。我想让滑块处理程序响应textarea输入。在这一刻，我的textarea通过幻灯片事件响应滑动。

I use bootstrap-slider Kartik extension for Yii2. I want to make slider handler responsive for textarea inputs. For this moment my textarea is responsive for sliding via slide event.

在
之前

$ b之后$ b

after

现在如何运作

How it works right now

推荐答案

如果您更新输入中的值，我会从您的问题中了解到您尝试更新或刷新滑块。

What i understand from your question you are trying to update or refresh the slider if you update the value inside an input.

如果这是正确的，你必须使用javascript将输入事件绑定到与滑块关联的输入字段，然后调用滑块的 setValue 函数来更新它。

If that is correct you have to use javascript to bind the input event to the input field associated with the slider and then call the setValue function of the slider to update it.

下面是一个简单的javascript示例/演示，您可以在其中更改输入字段中的值，滑块将自动更新

A simple javascript example/demo can be seen below where you can change the value inside the input field and the slider will update automatically

// With JQuery
$('#ex1').slider({
  formatter: function(value) {
    return 'Current value: ' + value;
  }
});
$("#range").on("input", function(e) {
  $('#ex1').slider('setValue', $(this).val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/css/bootstrap-slider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/bootstrap-slider.min.js"></script>

<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
<input type="text" id="range" value="" />

要在Yii中实现上述内容，您可以使用以下代码

To implement above in Yii you can use the code below

注意：将 #range_input 更改为输入字段的 id 您的代码，以及 #slider_input_id ，滑块的 id 。

Note: change the #range_input to the id of the input field in your code, and #slider_input_id with the id of your slider.

$this->registerJs('$("#range_input").on("change",function(){
    $("#slider_input_id").slider("setValue",$(this).val());
})',\yii\web\view::POS_LOAD);

这篇关于用户在textarea唯一数据中输入时更改处理程序值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！