将输入数字/文本添加到范围 [英] Add input number/text to range

问题描述

我有输入范围的字符串

 < input form =sendtype =rangemin =40 max =300name =width []value =40> 
  

它表示一部分的宽度。
如果用户需要一些零件，他点击添加按钮，并获得新的输入范围的新字符串。
所以我得到不同的值（零件的大小）。

现在我需要添加重复范围值的输入数字/文本，反之亦然。用户可以输入一个数字，范围输入也会改变。或者他改变输入范围和输入数字也得到这个值。

我知道怎么做，但没有宽度数组。
Eg

 < input type =rangename =widthmin =40max = 200value =40
 oninput =this.form.widthPlus.value = this.value/> < input 
 type =numbername =widthPlusmin =40max =200value =40
 oninput =this.form.width.value = this.value /> 
  

有人可以告诉我怎样才能输入数字重复值，并且如果用户添加新的带添加按钮的字符串。
我想我只能用JS / jQuery来完成它。

解决方案

最简单的方法就是使用新的每次 value 属性。没有像 width [] （这不起作用），而是 width0 ， width1 ， width2 ，..

因此，您的代码中有一个函数，它创建一个新的输入元素：

  var counter = 0; 
 function addElement（）{
 var html ='< input type =rangename =width+ counter +'min =40max =200value =40 oninput =this.form.widthPlus'+ counter +'.value = this.value/>'+ 
'< input type =numbername =widthPlus'+ counter +'min = 40max =200value =40oninput =this.form.width'+ counter +'.value = this.value/>'; 
 $（。outerContainer）。append（html）; 
 counter ++; 
} 
  

每次用户点击一个按钮，您都可以调用此函数来添加一个新元素。

还有一些不需要name-attribute向上计数的替代方法。如果用户输入了某些内容，则可以调用JS函数，然后使用jQuery来确定编辑了哪个元素（第n个孩子）。但是这有点复杂，需要更多代码。

I have string with input range

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

it means width of one part. If user needs some parts he clicks add button and get new string with new input range. So I get array with different values (size of parts).

Now I need to add input number/text which would repeat range value and vice versa. User can type a number and range input will be changed also. Or he changes input range and input number also get this value.

I know how to do it but without width array. E.g.

 <input type="range" name="width" min="40" max="200" value="40"
 oninput="this.form.widthPlus.value=this.value" /> <input
 type="number" name="widthPlus" min="40" max="200" value="40"
 oninput="this.form.width.value=this.value" />

Can somebody tell how I can do that to input number reapeat value and also was cloned if user add new string with add button. I think I can do it with JS/jQuery only.

解决方案

The easiest way is to just use a new value attribute everytime. Nothing like width[] (which does not work), but instead width0, width1, width2, ..

So somewhere in your code, you have a function which creates a new input element:

var counter = 0;
function addElement() {
    var html = '<input type="range"  name="width' +     counter + '" min="40" max="200" value="40" oninput="this.form.widthPlus' + counter + '.value=this.value" />' +
               '<input type="number" name="widthPlus' + counter + '" min="40" max="200" value="40" oninput="this.form.width'     + counter + '.value=this.value" />'; 
    $(".outerContainer").append(html);
    counter++;
}

And everytime the user clicks a button, you can call this function to add a new element.

There are also alternative ways that do not require the name-attribute to count upwards. You could just call a JS-function if the user enters something, and then use jQuery to determine which element was edited (n'th child). But this is a bit more complicated and requires more code.

这篇关于将输入数字/文本添加到范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！