Question

我有一个带有字符限制的表单中的文本区域，如果没有输入字符，如果超出字符限制或，我想禁用提交按钮。当用户输入一些字符，然后继续删除所有字符，将文本区域留空时，尽管检查到位，但发送按钮仍保持启用状态。其他一切都按照我的预期运作。它必须是简单的东西，但我只是看不到它......

HTML：

<textarea name="t" id="message-input-field" autofocus="autofocus" placeholder=""></textarea>
<input type="submit" value="Send" id="send-message-button" class="button"/>
<span id="counter"></span>

jQuery的：

// Disable by default
$('#send-message-button').prop('disabled', true);

// Do stuff when there is textarea activity
$('#message-input-field').on("propertychange input textInput", function () {
    var charLimit = 140;
    var remaining = charLimit - $(this).val().length;
    if(remaining == charLimit) {
        console.log("disabling");
        // No characters entered so disable the button
        $('#send-message-button').attr('disabled', true);
    } if (remaining < 0) {
        // remaining = 0; // Prevents the counter going into negative numbers
        $('#counter').addClass("over-char-limit").text(remaining);
        $('#send-message-button').attr('disabled', true);
    } else {
        $('#send-message-button').removeAttr('disabled');
        $('#counter').removeClass("over-char-limit").text(remaining);
    }
});

CSS

.over-char-limit {
    color: red;
}

UPDATE：

我已经确定了以下代码，现在对我来说效果很好。它可能不是最有效/优雅的方式，但对我的简单思想来说，它是非常清晰和可读的。感谢@Tats_innit和@gdoron帮助解决方案。

// Disable the send button by default. Enable only when text entered.
$('#send-message-button').prop('disabled', true);

// Character counter logic on the 'send message' text area. Rules are:
// 1. Counter appears on any input of text (pasting or key strokes).
// 2. Counter can go into negative numbers but changes to red when it does.
// 3. 'Send' button disabled when limit exceeded or no characters entered. 
$('#message-input-field').on("propertychange input textInput", function() {

    var charLimit = 140;

    // Calculate how many characters remain (this could be a negative number)
    var remaining = charLimit - $(this).val().length;

    // Add the counter value to #counter
    $('#counter').text(remaining);

    if (remaining == charLimit) {
       // Disable the button as no characters entered
        $('#send-message-button').prop('disabled', true);
        $('#counter').removeClass("over-char-limit");
    } else if (remaining < 0) {
        // Disable the button as too many characters entered
        // remaining = 0; // Prevents the counter going into negative numbers
        $('#send-message-button').prop('disabled', true);
        $('#counter').addClass("over-char-limit");
    } else {
        // Happy case: characters have been entered but do not exceed limit
        $('#send-message-button').prop('disabled', false);
        $('#counter').removeClass("over-char-limit");
    }
});

Answer 1

工作演示 http://jsfiddle.net/M3WgK/1/ 或 http://jsfiddle.net/M3WgK/12/（有10个字母显示正常工作）:)

使用计数器进一步演示 http://jsfiddle.net/M3WgK/15/

使用API：http://api.jquery.com/prop/

另请注意，您可能只需要2 if个阻止，因为您的逻辑为===或<，而非默认值。

希望这有帮助，并且@Gdorons解释有效使用.prop好读：.prop() vs .attr()

<强>码

// Disable by default
$('#send-message-button').prop('disabled', true);

// Do stuff when there is textarea activity
$('#message-input-field').on("propertychange input textInput", function() {
    var charLimit = 140;
    var remaining = charLimit - $(this).val().length;

    if (remaining === charLimit) {
       // No characters entered so disable the button
        $('#send-message-button').prop('disabled', true);

    } else if (remaining < 0) {
        // remaining = 0; // Prevents the counter going into negative numbers
        $('#counter').addClass("over-char-limit").text(remaining);
        $('#send-message-button').prop('disabled', true);
    } else {
        $('#send-message-button').removeAttr('disabled');
        $('#counter').removeClass("over-char-limit").text(remaining);
    }
});

Answer 2

变化：

$('#send-message-button').removeAttr('disabled');

要：

$('#send-message-button').prop('disabled', false);

您没有设置属性，您更改了property：

$('#send-message-button').prop('disabled', true);

并改变：

$('#send-message-button').attr('disabled', true);

要：

$('#send-message-button').prop('disabled', true);

Answer 3

为什么不是更简单的代码？

$("#message-input-field").keyup(function() {
    var c = $(this).val().length;
    var ok = (c>0 && c<140);
    var button = $("#send-message-button");
    ok ? button.removeAttr('disabled') : button.attr("disabled",true);
    $("#counter").toggleClass("over-char-limit", !ok); // toggles class, easy way
} );

旁注：你应该从已经禁用的按钮开始（因为我们没有输入）。并且，您应该包括类更改和计数器的代码，但它应该是直截了当的。如果您需要，请寻求帮助：）

Answer 4

您的代码没有任何问题，只是您错过了这里::

if（remaining == charLimit）{.......} else if（remaining＆lt; 0）{

就是这样。

如果您不想使用if，则可能需要向下移动

if(remaining == charLimit) {}

到if else语句的下半部分。

输入区域中没有文本时，Jquery提交按钮未禁用

UPDATE：

4 个答案: