2

我在一个有字符限制的表单中有一个文本区域，如果超出字符限制或没有输入字符，我想禁用提交按钮。当用户输入了一些字符但随后又继续删除所有字符时，文本区域为空，尽管检查已到位，但发送按钮仍保持启用状态。其他一切都按我的预期工作。它一定很简单，但我就是看不到它......

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

更新：

我已经确定了以下代码，它现在对我来说很好。这可能不是最有效/最优雅的方式，但在我看来，它非常清晰易读。感谢 @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");
    }
});
4

4 回答 4

3

工作演示 http://jsfiddle.net/M3WgK/1/ 或 http://jsfiddle.net/M3WgK/12/（用 10 个字母表示完整的工作）:)

带有计数器的进一步演示 http://jsfiddle.net/M3WgK/15/

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

另请注意，您有 2if个块，您可能只需要 2 个，因为您的逻辑是默认的，===或者<默认的。

希望这会有所帮助，@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);
    }
});​
于 2012-06-22T08:17:18.840 回答
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);
于 2012-06-22T08:02:59.023 回答
0

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

$("#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
} );​​​​​​​​​​​​​​​​​​

旁注：您应该从已禁用的按钮开始（因为我们没有输入）。而且，您应该包含类更改和计数器的代码，但它应该是简单的。如果需要，请寻求帮助:)

于 2012-06-22T08:20:01.930 回答
0

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

if(remaining == charLimit) {.......} else if (remaining < 0) {

就这样。

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

if(remaining == charLimit) {}

到 if else 语句的下部。

于 2012-06-22T08:24:55.280 回答