如何使用自定义 maxlength 限制两个输入？

Question

如何使用自定义 maxlength 限制两个输入？

我正在设置自定义限制 $limit = "500"; 并尝试在两个输入中限制用户单词。我想限制第一个输入的最大长度并计算第一个输入中的字数，而不是用我的自定义限制中剩下的字数限制第二个输入的最大长度。

我想将长度设置在一起，最大长度为 500，一个可以有最大 100，一个可以有最大 400。 如果第一个输入的单词少于 100，则将剩余的单词添加到第二个输入的最大长度。 like : 第一个输入有 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">