html - 当 html5 滑块的值更改时触发提交

Question

当滑块的值发生变化时如何触发提交？我的代码中捕获的值决定了 svg 矩形的宽度。我希望在不点击“提交”的情况下滑动滑块时改变宽度。我在 python 龙卷风上下文中使用了 '{{float(x)}}'。

到目前为止尝试过这个：

<form name="form" oninput="rangeValueDisplay.value=range.value">
Width: <input type="range" name="range" value="100" min="100" max="1000" />
<output name="rangeValueDisplay" for="range">1960</output>
<input type="submit">
</form>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="{{float(x)}}" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

来自另一个用户的类似问题 - https://stackoverflow.com/questions/13540848/autosubmit-html5-range-slider

Answer 1

要根据滑块值动态调整矩形大小，可以使用 jQuery：

JS：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(function() {
    $('input[type=range]').change(function() {
        $('rect').attr('width', $(this).val());
    });

});
</script>