Как ограничить ввод на основе значения другого ввода, используя javascript

Question

Html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
     Paid Balance</strong>: <input type="text" name="paidbalance" id="paidbalance" class="form-control"  />
        </div>
        
        <div class="col-md-2" >
     Balance</strong>: <input type="text" name="balance" id="balance" class="form-control"  value="200" readonly/>
        </div>

Здравствуйте, Кто-нибудь может мне помочь с этой проблемой. Как ограничить ввод на основе значения другого входа, используя javascript. Например, значение ввода баланса равно 200, так что возможный ввод в PaidBalance не превышает 0-200.

Извините, я просто студент. Спасибо:):)

Answer 1

Как то так?

$("#paidbalance").keyup(()=>{
  const balance = parseFloat($("#balance").val())
  const paidBalance = parseFloat($("#paidbalance").val())
  
  if( paidBalance > balance)
    $("#paidbalance").val(balance)
  else if(paidBalance < 0)
    $("#paidbalance").val(0)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Paid Balance
</strong>: <input type="text" name="paidbalance" id="paidbalance" class="form-control"  />
        
Balance
</strong>: <input type="text" name="balance" id="balance" class="form-control"  value="200"   readonly/>

Answer 2

Это с чистым javascript без jquery. Также обратите внимание, что принятый ответ не работает, если пользователь вставил какое-либо значение с помощью щелчка правой кнопкой мыши: опция вставки.

function f1()
{
  var max = Number(document.getElementById("balance").value);
  var paid = document.getElementById("paidbalance");
  var v = Number(paid.value);
  //if(isNaN(v)) {...} //input is not a number
  if(v>max) {
    paid.focus(); //to keep focus on input
    paid.value=max; //you may comment out this line to don't override value
  }
}

<div class="col-md-2">
     Paid Balance</strong>: <input type="text" name="paidbalance" id="paidbalance" class="form-control"  oninput="f1()" />
</div>
        
<div class="col-md-2" >
     Balance</strong>: <input type="text" name="balance" id="balance" class="form-control"  value="200"  />
</div>

Answer 3

Измените ввод на type="number" и добавьте jQuery следующим образом:

var balance = $('#balance')
var paidBalance = $('#paidbalance')

paidBalance[0].setAttribute('max', balance.val()) 

Пример: https://jsfiddle.net/Daniel_Knights/t4hb0z7p/8/

Answer 4

В этом случае вы можете изменить тип на number и добавить свойство max в input. Если значение входного баланса отличается каждый раз. Вы могли бы рассмотреть возможность присвоить его переменной и передать его свойству max

 Paid Balance</strong>: 
<input type="number" name="paidbalance" id="paidbalance" max="200" class="form-control"  />