根据另一个输入设置最大值答案

【问题标题】：Set max value based on another input根据另一个输入设置最大值
【发布时间】：2016-03-23 15:05:43
【问题描述】：

我需要根据另一个输入的值设置一个输入的最大值。

我将有两个输入，输入 x 和输入 y，用户在每个输入中输入一个值，但 y 的值不能超过 x 值的 80%，所以我想要输入 y 的最大值所以你不能超过输入 x 的 80%。

因此，如果有人将 100 放入输入 x 并尝试将 90 放入输入 y，则输入 y 将变为 80，因为那将是最大值。

我打算使用 javascript 和 HTML 来实现这一点。

【问题讨论】：

好主意。你有一些代码要显示吗？
恐怕没有，我在这上面看了一整天想找个起点，找不到任何东西

标签： javascript html input attributes max

【解决方案1】：

我建议使用两个字段的onchange 事件监控输入，并使用Math.min(...) 限制值

这是一个sn-p：

var elX = document.getElementById("X");
var elY = document.getElementById("Y");

function limit() {
	elY.value=Math.min(Math.round(elX.value*.8),elY.value);
}

elX.onchange=limit;
elY.onchange=limit;

<input type="number" id="X" value="0"><br>
<input type="number" id="Y" value="0">

【讨论】：

哦，如果输入类型是文本而不是数字，但值是整数，我想不会有办法做到这一点？
您也可以使用type="text"，只要您只输入数字即可。

【解决方案2】：

这是一个使用 JQuery 和 2 个简单输入字段的简单解决方案。它几乎可以满足您的需求 -> JSFiddle

相关JS：

(function(){
$("#y").on("change", function(e){
    var x = $("#x").val()
  if($(this).val() > (x*80)/100){
    $(this).val(((x*80)/100));
    alert("field Y cannot excede 80% of field X")
  }
})
}())

【讨论】：

【解决方案3】：

如果我理解正确：

输入是这样的：

<input type="number" id="Y" max="numberHere">

你可以这样做像这样：

var temp = document.getElementById("Y");
var maxValue = document.getElementById("X").value * 0.8;
temp.setAttribute("max",maxValue); // set a new value;

【讨论】：

这是原则，这个例子在使用那些小箭头来设置数字时确实有效，但我需要它来响应用户物理输入“100”之类的内容，然后它会变为最大值
用户设置数字输入时“onchange”或“oninput”没有上升？
输入时什么也没发生，通过箭头调整值时最大值很明显
如果绑定 oninput，并在该函数中设置新的最大值，并检查实际值是否大于新的最大值，则将其设置为新的最大值