フォームに文字数制限のあるテキスト領域があり、文字数制限を超えた場合、または文字が入力されていない場合は、送信ボタンを無効にします。ユーザーがいくつかの文字を入力した後、テキスト領域を空のままにしてすべての文字を再度削除すると、チェックが行われているにもかかわらず、送信ボタンが有効のままになります。他のすべては私が期待するように機能します。シンプルなものに違いないけど、見えない…
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");
}
});