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

您只需将事件绑定到长度检查+我已将其修改为input事件而不是keydown - 它更可靠。

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

// Limit character counter

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);

  // Title Input

  inputTitle.on('input', 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');
    }

  });

  // Ribbon input

  inputRibbon.on('input', 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');
    }

  });

  // Description Input

  inputDescription.on('input', 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');
    }

  });

  // Disable Submit if any of the input character max lengths are over

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

}

characterLimit();

Answer 2

您的逻辑问题是它只检查最后输入的输入。如果再次变为有效长度，则无论其他输入的状态如何，它都会自动启用提交。

但是您的代码存在一些问题。使用keydown表示计数器忽略您键入的第一个字符。请尝试使用input。此外，您的代码也可以使用DRYing，因为它为每个控件重复自己。您可以使用类和data属性的混合来使单个事件处理程序适用于所有元素。试试这个：

＆＃13;

function characterLimit() {
  $('.char-limit').after(function() {
    return '<p><span class="max">' + $(this).data('charlimit') + '</span> characters remaining</p>';
  }).on('input', function() {
    var $el = $(this);
    var limit = $el.data('charlimit');
    var remaining = limit - this.value.length;

    $el.next('p').find('.max').text(remaining);
    $el.toggleClass('invalid', remaining < 0);

    $('#submitBtn').prop('disabled', $('.char-limit.invalid').length != 0);
  });
}

characterLimit();

＆＃13;

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul li {
  margin-bottom: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <form action="">
    <ul>
      <li>
        <input id="createDealTitle" class="char-limit" type="text" data-charlimit="20">
      </li>
      <li>
        <input id="createDealRibbon" class="char-limit" type="text" data-charlimit="15">
      </li>
      <li>
        <textarea id="createDealDescription" class="char-limit" type="text" rows="10" cols="50" data-charlimit="120"></textarea>
      </li>
      <li>
        <input id="submitBtn" type="submit" value="Send Message">
      </li>
    </ul>
  </form>
</div>

＆＃13;

Answer 3

我更新了你的小提琴：

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

＆＃13;

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();

＆＃13;

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  margin-bottom: 10px;
}

＆＃13;

<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>

＆＃13;

Answer 4

您需要修改条件以禁用提交按钮以包含表示其他文本输入的当前禁用状态的Boolean。

否则，如果您开始键入另一个不超过字符长度的文本输入，则重新启用提交按钮。

<强>解决方案：

如果其他输入超过长度，则条件应自动失败：

var exceededTitle = false;
var exceededRibbon = false;
var exceededDescription = false;

// Then inside keydown:

inputRibbon.keydown(function(){
  ...
  if(exceededTitle || exceededRibbon || exceededDescription)
    // Disable submit
  ...

Answer 5

您正在控制3个地点inputTitle.keydown()，inputDescription.keydown()和inputRibbon.keydown()的提交按钮。这意味着每次要启用提交按钮时，您只需检查三个条件中的一个。在启用它之前，您应该检查所有三个侦听器中每个if-else块中的所有三个条件。

Answer 6

尝试以下方法：

如果您在页面/表单上有错误类，则禁用或启用该按钮：

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 input = $('#createDealTitle,#createDealRibbon,#createDealDescription');

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

  // Title Input

  input.keydown(function() {
    var textLength = $(this).val().length;
    var dh = $(this).next().find('span');
    var max = dh.text();
    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');
    }
    if ($('.error-input').length) {
      btnSubmit.attr('disabled', true).addClass('disabled');//disable the input if a error exist
    } else {
      btnSubmit.attr('disabled', false).removeClass('disabled');//enable the button if there are no errors on the page
    }
  });       

}

characterLimit();

演示：https://jsfiddle.net/gkvLxygs/1/

Answer 7

您可以使用布尔变量来决定是否应启用/禁用该按钮。

var buttonEnabled = false;

if (textLength > headingMax) {

  buttonEnabled = false;
  toggleButtonEnabled(buttonEnabled);

} else {

  buttonEnabled = true;
  toggleButtonEnabled(buttonEnabled);
}

每次要启用/禁用按钮时调用此函数：

function toggleButtonEnabled(isEnabled){
    btnSubmit.attr('disabled', isEnabled);
    if(isEnabled){
        btnSubmit.removeClass('disabled');
    }else{
        btnSubmit.addClass('disabled');
    }
}

这样，你总有一个功能来控制按钮。

禁用提交输入字符数限制

7 个答案: