javascript - 当用户在 textarea 唯一数据中输入时更改处理程序值
问题描述
我为 Yii2 使用 bootstrap-slider Kartik 扩展。我想让滑块处理程序响应文本区域输入。此刻,我的 textarea 对通过滑动做出响应slide event
。
解决方案
如果您更新输入中的值,我从您的问题中了解到您正在尝试更新或刷新滑块。
如果这是正确的,您必须使用 javascript 将input
事件绑定到与滑块关联的输入字段,然后调用滑块的setValue
函数来更新它。
下面可以看到一个简单的 javascript 示例/演示,您可以在其中更改输入字段内的值,滑块将自动更新
// 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 中实现上述功能,您可以使用以下代码
注意:将 更改为#range_input
代码id
中输入字段的 ,并#slider_input_id
使用id
滑块的 。
$this->registerJs('$("#range_input").on("change",function(){
$("#slider_input_id").slider("setValue",$(this).val());
})',\yii\web\view::POS_LOAD);
推荐阅读
- ios - 带乘数的领先约束不起作用
- javascript - 无法使用 jQuery 访问元素
- angular6 - 谁能解释为什么我们需要 ngModel 和 #nameField="ngModel" 都在 angular6 表单的相同输入字段中?
- php - imagecopyresampled 似乎没有执行
- reactjs - 动态形式:TypeError:无法读取未定义的属性“值”
- c# - 使用 HTML 敏捷性获取属性值
- android-ndk - 使用 ndk 创建本机后台应用程序
- python - 使用延迟从powershell循环调用python
- python - VScode:如何调试 python 2.7 cgi 脚本?
- openshift - Openshift:如何创建具有 SYS_LOCK 功能的 scc