Question

看起来很简单，但我找不到一个好办法。

我正在做一个研究栏，允许用户搜索价格迷你和价格最大值的东西。

所以：我有两种文本输入类型（当然是html）＆＃34; price_mini？＆＃34;和＆＃34; price_maxi？＆＃34;。＆＃34; Price_mini＆＃34;不能超过＆＃34; price_maxi＆＃34;。如何限制＆＃34; price_mini＆＃34;的用户输入？这样如果不允许用户输入超过＆＃34; price_maxi＆＃34;变量的输入，如果迷你号码大于price_maxi，则在保存（搜索）时显示错误。

Answer 1

像这样的东西应该有用，我无法让JSFiddle处理表单给你展示一个很好的例子我现在几天都不用普通的javascript做很多事情所以请原谅我，如果有一个小的错误或两个。

HTML

<form name="myForm" onSubmit="submit()" method="post">
    <input name="price_mini" type="text">
    <input name="price_maxi" type="text">
    <input type="submit" value="Submit">
</form>

的Javascript

function submit(){
    var price_mini = document.forms["myForm"]["price_mini"].value;
    var price_maxi = document.forms["myForm"]["price_maxi"].value;

   if(Number(price_mini) > Number(price_maxi)){
    alert("Minimum price must be less than maximum price!");
   }else{
    // Your search code here
   }
}

Answer 2

想象一下这个html

 <input id="min" type="text">
 <input id="max" type="text">

这应该是正确的javascript

 var min = document.getElementById("min");
 var max = document.getElementById("max");
 min.change(function() {
    if(Number(this.value) > Number(max.value)) {
         this.value = max.value; // replace min with the same max value if it's bigger
    }
 }

Answer 3

我们假设这是您的HTML。

<input id="min" type="text">
<input id="max" type="text">

如果max字段为空，则工作JavaScript就是这种行为。

var min = document.querySelector('#min');
var max = document.querySelector('#max');

var calculate = function() {
  if(max.value == '') return;
  if(Number(min.value) > Number(max.value)) {
    min.value = max.value;
  }
}

min.addEventListener('input', calculate);
max.addEventListener('input', calculate);

Answer 4

您应该在值(min && max)时对它们进行比较。如果您发现min更高，则可以提醒用户或自动将其更改为最低或最高。

＆＃13;

$('.calc_input').change( function() {
  var min = $('#min').val();
  var max = $('#max').val();
  if ( (min && max) && min > max ) {
    alert('This can not be!');
    // $('#min').val() = max;
    // $('#max').val() = min;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Min:<input id="min" class="calc_input">
<br>
Max:<input id="max"  class="calc_input">

＆＃13;

基于另一文本输入限制文本输入

4 个答案: