Question

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

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

我想将长度设置为最大长度500，一个可以最大为100，一个最大可以为400。如果第一个输入的单词少于100个，则将其余的单词加到第二个输入的最大长度上。像：第一个输入中有95个单词，剩下的还有5个单词。

然后将第二个输入的最大输入值更改为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

希望下面的代码对您有所帮助，

$(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">

Answer 2

我相信您需要这样的东西：

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>

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

2 个答案: