Как ограничить два входа с пользовательской максимальной длиной?

Question

Как ограничить два входа с пользовательской максимальной длиной?

Я устанавливаю пользовательский лимит $limit = "500"; и пытаюсь ограничить пользовательские слова в двух входах. Я хочу ограничить первую входную максимальную длину и посчитать слова в первом входном сигнале, а затем ограничить вторую входную максимальную длину словами, оставленными в моем пользовательском ограничении.

Я хочу установить длину вместе макс. Длина 500, можно иметь максимум 100, а можно максимум 400. и если первый ввод содержит меньше слов, чем 100, то добавьте оставшиеся слова, оставшиеся ко второй длине ввода. как: первый ввод содержит 95 слов, 5 слов осталось, чтобы достичь предела.

затем измените второй вход maxlentgh на 405,

Я создаю входные данные, подобные этому:

function maxLength(el) {
  if (!('maxLength' in el)) {
    var max = el.attributes.maxLength.value;
    el.onkeypress = function() {
      if (this.value.length >= max) return false;
    };
  }
}

maxLength(document.getElementById("title"));

function validateLength(el, word_left_field, len) {
  document.all[word_left_field].value = len - el.value.length;
  if (document.all[word_left_field].value < 1) {
    alert("You can add max " + len + " words .");
    el.value = el.value.substr(0, len);
    document.all[word_left_field].value = 0;
    return false;
  }
  return true;
}

<input type="text" id="title" name="title" maxlength="100" onChange="return validateLength(this, 'word_left', 100);" onKeyUp="return validateLength(this, 'word_left', 100);">
<input type="text" name="word_left" value="100" style="width: 25;" readonly="true" size="3">
<input type="text" id="subject" name="subject" maxlength="400" onChange="return validateLength(this, 'word_left', 400);" onKeyUp="return validateLength(this, 'word_left', 400);">
<input type="text" name="word_left" value="400" style="width: 25;" readonly="true" size="3">

итого, оба входа 500.

Я попытался установить атрибуты html 5 pattern = ". {59,60}" , но они совпадают с настройками атрибутов min и length.

Но мой javascript ограничивает первый ввод. Я перепробовал несколько методов, но у меня не было возможности заставить его работать, это был бы длинный вопрос, который я здесь не поставил.

Answer 1

Я верю, что вам нужно что-то вроде этого:

var _maxLength = 500;
var _lengthInput = 0;

var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var p = document.getElementById("total");

p.innerHTML = _maxLength;

input1.addEventListener("focus", function(e) {
  this.maxLength = _maxLength + this.value.length;
  _lengthInput = this.value.length;
});

input1.addEventListener("blur", function(e) {

  if (_lengthInput == this.value.length)
    return;
  if (_lengthInput > this.value.length) {
    _maxLength += _lengthInput - this.value.length;
  } else {
    _maxLength -= this.value.length - _lengthInput;
  }

  total.innerHTML = _maxLength;
});

input2.addEventListener("focus", function(e) {
  this.maxLength = _maxLength + this.value.length;
  _lengthInput = this.value.length;
});

input2.addEventListener("blur", function(e) {
  if (_lengthInput == this.value.length)
    return;
  if (_lengthInput > this.value.length) {
    _maxLength += _lengthInput - this.value.length;
  } else {
    _maxLength -= this.value.length - _lengthInput;
  }

  total.innerHTML = _maxLength;
});

Input 1 <input type="text" id="input1">
<br /> Input 2 <input type="text" id="input2">
<br />
<p>Characters remaining: <span id="total"></span> </p>

Answer 2

Надеюсь, приведенный ниже код поможет вам,

$(document).ready(function () {

	$("#subject").on("keypress", function () {
  	var titleLength = $("#title").val().length;
    var titleMaxLength = $("#title").attr("maxLength");
    var titleWordLeft = titleMaxLength - titleLength
    var subjectLength = $("#subject").data("charlength"); 
    var subjectMaxLength = titleWordLeft + subjectLength;
    $("#subject").attr("maxLength",subjectMaxLength);
    
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="title" name="title" maxlength="100">

<input type="text" name="word_left" value="100" style="width: 25;" readonly="true" size="3">

<input type="text" id="subject" name="subject" data-charlength="400">


<input type="text" name="word_left" value="400" style="width: 25;" readonly="true" size="3">