javascript - 禁用提交输入字符数限制

Question

我的解决方案工作了 90%，并且当用户键入的字符数超过允许的字符数时，“提交”按钮将禁用，但只要用户点击下一个输入，该按钮就会再次启用。

在底部，我尝试添加一个 if 语句，但它似乎没有什么区别。帮助将不胜感激。也有很多代码正在为三个输入重复以限制字符，因为数量不同，是否有更好的写法？

function characterLimit() {

var headingMax       = 20;
var ribbonMax        = 15;
var descriptionMax   = 120;
var dh               = $('.heading-max');
var dr               = $('.ribbon-max');
var dd               = $('.description-max');
var btnSubmit        = $('#submitBtn');
var inputTitle       = $('#createDealTitle');
var inputRibbon      = $('#createDealRibbon');
var inputDescription = $('#createDealDescription');

dh.html(headingMax);
dr.html(ribbonMax);
dd.html(descriptionMax);

inputTitle.keydown(function(){
  var textLength    = $(this).val().length;
  var textRemaining = headingMax - textLength;

  dh.html(textRemaining);

  if (textLength > headingMax) {
    dh.addClass('error-text');
    $(this).addClass('error-input');
    btnSubmit.attr('disabled', true).addClass('disabled');
  }else {
    dh.removeClass('error-text');
    $(this).removeClass('error-input');
    btnSubmit.attr('disabled', false).removeClass('disabled');
  }

});

inputRibbon.keydown(function(){
  var textLength    = $(this).val().length;
  var textRemaining = ribbonMax - textLength;

  dr.html(textRemaining);

  if ($(this).val().length > ribbonMax) {
    dr.addClass('error-text');
    $(this).addClass('error-input');
    btnSubmit.attr('disabled', true).addClass('disabled');


  }else {
    dr.removeClass('error-text');
    $(this).removeClass('error-input');
    btnSubmit.attr('disabled', false).removeClass('disabled');
  }

});

inputDescription.keydown(function(){
  var textLength    = $(this).val().length;
  var textRemaining = descriptionMax - textLength;

  dd.html(textRemaining);

  if ($(this).val().length > descriptionMax) {
    dd.addClass('error-text');
    $(this).addClass('error-input');
    btnSubmit.attr('disabled', true).addClass('disabled');
  }else {
    dd.removeClass('error-text');
    $(this).removeClass('error-input');
    btnSubmit.attr('disabled', false).removeClass('disabled');
  }

});

if (inputTitle.val().length > headingMax || inputRibbon.val().length  > ribbonMax || inputDescription.val().length > descriptionMax) {
  btnSubmit.attr('disabled', true).addClass('disabled');
}else {
  btnSubmit.attr('disabled', false).removeClass('disabled');

}

}

characterLimit();

https://jsfiddle.net/gavinthebarbarian/5n9d1Lq2/

Answer 1

我更新了你的 fiddle :

您的主要错误是，对所有输入字段的最后一次检查超出了范围。

function characterLimit() {

  var headingMax = 20;
  var ribbonMax = 15;
  var descriptionMax = 120;
  var dh = $('.heading-max');
  var dr = $('.ribbon-max');
  var dd = $('.description-max');
  var btnSubmit = $('#submitBtn');
  var inputTitle = $('#createDealTitle');
  var inputRibbon = $('#createDealRibbon');
  var inputDescription = $('#createDealDescription');

  var input1Isvalid = true;
  var input2Isvalid = true;
  var input3Isvalid = true;

  dh.html(headingMax);
  dr.html(ribbonMax);
  dd.html(descriptionMax);

  // Title Input

  inputTitle.keydown(function() {
    var textLength = $(this).val().length;
    var textRemaining = headingMax - textLength;

    dh.html(textRemaining);
    if (textLength > headingMax ) {
      dh.addClass('error-text');
      $(this).addClass('error-input');
      input1Isvalid = false;

    } else {
      dh.removeClass('error-text');
      $(this).removeClass('error-input');
      input1Isvalid = true;

    }
        checkInput()
  });

  // Ribbon input

  inputRibbon.keydown(function() {
    var textLength = $(this).val().length;
    var textRemaining = ribbonMax - textLength;

    dr.html(textRemaining);

    if ($(this).val().length > ribbonMax) {
      dr.addClass('error-text');
      $(this).addClass('error-input');
      input2Isvalid = false;

    } else {
      dr.removeClass('error-text');
      $(this).removeClass('error-input');
      input2Isvalid = true;
    }
    checkInput()
  });

  // Description Input

  inputDescription.keydown(function() {
    var textLength = $(this).val().length;
    var textRemaining = descriptionMax - textLength;

    dd.html(textRemaining);

    if ($(this).val().length > descriptionMax) {
      dd.addClass('error-text');
      $(this).addClass('error-input');
      btnSubmit.attr('disabled', true).addClass('disabled');
      input3Isvalid = false;
    } else {
      dd.removeClass('error-text');
      $(this).removeClass('error-input');
      btnSubmit.attr('disabled', false).removeClass('disabled');
      input3Isvalid = true;
    }
    checkInput()
  });
  function checkInput(){
    // Disable Submit if any of the input character max lengths are over
    if(!input1Isvalid || !input2Isvalid || !input3Isvalid)
          btnSubmit.attr('disabled', true).addClass('disabled');
    else
          btnSubmit.attr('disabled', false).removeClass('disabled');
  }



}

characterLimit();

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <form action="">
    <ul>
      <li>
        <input id="createDealTitle" type="text">
        <p><span class="heading-max"></span> characters remaining</p>
      </li>

      <li>
        <input id="createDealRibbon" type="text">
        <p><span class="ribbon-max"></span> characters remaining</p>
      </li>
      <li>
        <textarea id="createDealDescription" type="text" rows="10" cols="50"></textarea>
        <p><span class="description-max"></span> characters remaining</p>
      </li>
      <li>
        <input id="submitBtn" type="submit" value="Send Message">

      </li>
    </ul>




  </form>
</div>