输入范围获取输入数值,反之亦然(oninput = ...)

时间:2017-08-16 04:27:20

标签: html input

我有2个输入,其类型范围和数字相互得到值。

这是工作代码:

<form>
    <input type="range" name="height" min="0" max="20" value="0" oninput="this.form.heightPlus.value=this.value" />
    <input type="number" name="heightPlus" min="0" max="20" value="0" oninput="this.form.height.value=this.value" />
</form>

但是我需要投入div而不是形式。

我应该如何更改输入

oninput="this.form.width.value=this.value"

我试过像

那样的人
$('input[name=height]').val()

但没有结果

3 个答案:

答案 0 :(得分:2)

我希望这有助于你

<div>
    <input type='range' name="height" id='height' min='0' max='20' value='0' oninput='document.getElementById("heightPlus").value=this.value' />
    <input type='number' name="heightPlus" id='heightPlus' min='0' max='20' value='0' oninput='document.getElementById("height").value=this.value' />
</div>

为你的小提琴改变Jquery代码如下

<强> HTML

<div class="gallery-slider" ></div>

<强> Jquery的:

var counter = 0;
$('.gallery-slider').append("<input type='range' id='width' name='width" + counter + "' min='40' max='200' value='40'/><input type='number' id='widthPlus' name='widthPlus" + counter + "' min='40' max='200' value='40'/>");
$(document).on('input', '#width', function(event) {
    $(this).next().val($(this).val());
});
$(document).on('input', '#widthPlus', function(event) {
    $(this).prev().val($(this).val());
});

答案 1 :(得分:1)

在这种情况下,您通常会为每个输入元素赋予唯一的id属性,并使用window.getElementById('idValue').value =...来设置值。这甚至不需要jQuery。

HTML:

<input type="range" id="idValue" min="0" max="20" value="0" oninput="window.getElementById('otherIdValue')=this.value" />

答案 2 :(得分:0)

我有4列的“字符串”: 1.选择(物品类型) 2.输入范围+(输入数量(现已添加))(物体高度) 3.输入范围+(输入数量(现已添加))(物体宽度) 4.输入只读计算

用户输入前3列的数据获得结果然后他可以添加一个(然后是两个,三个......)更多字符串(单击添加按钮)或转到回调表单(提交按钮)。 当他点击提交表单打开时,弹出窗体会显示一些字段:名称,电话,textarea中的用户数据: 1.事物类型1 40x60 2400 2. 2型40x50 2000 .... Datas texarea通过form =“send”获得。

一切都很好但我需要添加重复输入范围值的输入数字,反之亦然。 输入范围最初在html中以这种方式查看

<div class="gallery">
<input form="send" type="range" min="40" max="300" name="width[]" value="40">
</div>

然后我从html中删除它并通过jQuery添加,如你所见:jsfiddle.net/MikhailZ/2dJAN/1496

现在我遇到了反问题。每个字符串中的Name = width1。 还有.append / .html的问题 当我获得弹出窗口时,我有.append,我点击提交按钮,并在每个字符串的每个div中再输入一个输入范围和输入数字。 我更改为.html,没有克隆,但现在我将最小输入值设置为弹出窗体。 例如,用户选择1. Thing Type 1 100x60 6000 但是我得到的形式1. Thing Type 1 40x40 6000