输入类型“范围” - 设置动态范围

时间:2017-09-11 23:28:51

标签: javascript html5

我正在寻找一种方法来将range类型的输入的最小值设置为等于特定字段的值。

此刻,我有这个:

这些显示在模态窗口中

<div class="form-group">
    <label asp-for="NumDevices" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <input id="NumDevices" type="text" asp-for="NumDevices" class="form-control" />
        <input id="getNum" type="range" max="10" step="1" onchange="fetch()" class="form-control" />
    </div>
</div>

这是我目前的JS:

<script>
    function getminimun() { 
        var minimun = document.getElementById("NumDevices").value;
        var shareminimun = Number(minimun);
        document.getElementById("getNum").min = shareminimun;
    }
</script>

问题: 我需要将我的getminimun()函数调用到我的id:“getNum”输入中。我怎样才能做到这一点?是否有onload选项?的onload = “getminimun()”

我提议的是否正确?可以做得更好吗?

对于任何好奇,这是我的fetch()函数:

<script>
    function fetch()
    {
        var get = document.getElementById("getNum").value;
        document.getElementById("NumDevices").value = get;
    }
</script>

1 个答案:

答案 0 :(得分:0)

解决这个问题:

由于我使用模态窗口来显示这些字段,因此我添加了以下代码,以便在模式打开后执行Javascript。

<script>
    $(document).ready(function getminimun() {
        $('#modal-action-machine').on('shown.bs.modal', function () {
            var minimun = document.getElementById("NumDevices").value;
            var shareminimun = Number(minimun);
            document.getElementById("getNum").min = shareminimun;
            document.getElementById("getNum").value = shareminimun;
        });
    });
</script>

还需要为此特定情况设置“getNum”输入类型范围的值。