Javascript - 未禁用发布按钮 - 字符数不起作用答案

【问题标题】：Javascript - post button not disabled - character count not workingJavascript - 未禁用发布按钮 - 字符数不起作用
【发布时间】：2016-04-04 09:59:49
【问题描述】：

当我没有插入至少 1 个字符并且字符计数不起作用时，此代码不会给我一个禁用的发布按钮。我检查了 index.html，看看 js 文件是否正确链接。我正在使用 safari，也尝试过 chrome。

app.js 文件：

var main = function() {
$('.btn').click(function() {
    var post = $('.status-box').val();
    $('<li>').text(post).prependTo('.posts');
    $('.status-box').val('');
    $('.counter').text(140);
    $('.btn').addClass('disabled');
});
$('.status-box').keyup(function() {
    var postLength = $(this).val().length;
    var charactersLeft = 140 - postLength;
    $('.counter').text(charactersLeft);

    if(charactersLeft < 0) {
        $('.btn').addClass('disabled');
    }
    else if(charactersLeft === 140) {
        $('.btn').addClass('disabled');
    }
    else {
        $('.btn').removeClass('disabled');
    }
});
$('.btn').addClass('disabled');
};



$(document).ready(main);

html.index 文件：

<!doctype html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-   content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
  <form>
    <div class="form-group">
      <textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
    </div>
  </form>
  <div class="button-group pull-right">
    <p class="counter">140</p>
    <a href="#" class="btn btn-primary">Post</a>
  </div>

  <ul class="posts">
  </ul>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>

</body>
</html>

css文件：

html,
body {
font-family: 'Roboto', sans-serif;
color: #404040;
background-color: #eee;
}

.container {
width: 520px;
margin-top: 20px;
}

.button-group {
margin-bottom: 20px;
}

.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}

.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}

.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}

【问题讨论】：

你也可以发布你的html吗？还是创建一个 jsfiddle？
您在浏览器控制台中是否收到任何错误报告？
keyup 不是用于此类事情的好事件。在现代浏览器上，input 是最好的；在较旧的浏览器上，您需要组合一些东西，主要是 change、keypress（带有 setTimeout 延迟）和非标准的 paste..
我认为最后一个 else 正在删除禁用的类。删除 ligne : else { $('.btn').removeClass('disabled'); }
@IlyasMimouni：如果前面的任何一个条件为真，则不会

标签： javascript button count character

【解决方案1】：

keyup 不是用于此类事情的好事件。在现代浏览器上，input 是最好的；在较旧的浏览器上，您需要组合事物，主要是 change、keypress 和 keyup（带有 setTimeout 延迟，因为当它们发生时该字段尚未更新），以及非标准的 paste ..

例如（见 cmets）：

var main = function() {
    function enableDisableButtons(field) {
        var postLength = field.val().length;
        var charactersLeft = 140 - postLength;
        $('.counter').text(charactersLeft);

        // Note we can readily combine the two conditions and use toggleClass
        var disabled = charactersLeft < 0 || charactersLeft === 140;
        $('.btn').toggleClass('disabled', disabled);
        return disabled;
    }
    $('.btn').click(function() {
        // Proactively check when the button is clicked, in case all else failed
        if (enableDisableButtons($('.status-box'))) {
            return;
        }
        var post = $('.status-box').val();
        $('<li>').text(post).prependTo('.posts');
        $('.status-box').val('');
        $('.counter').text(140);
        $('.btn').addClass('disabled');
    });
    $('.status-box')
        .on("input change paste", function() {
            // Field is already updated when these happen
            enableDisableButtons($(this));
        })
        .on("keypress keyup", function() {
            // Field not be updated until just *after* these happen, so wait a tick
            setTimeout(enableDisableButtons.bind(null, $(this)), 0);
        });
    $('.btn').addClass('disabled');
};

$(document).ready(main);

.disabled {
  color: grey;
}

<textarea class="status-box"></textarea>
<input class="btn" type="button" value="Send">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

旁注：为什么使用disabled 类而不是按钮的固有disabled 功能？

【讨论】：

这是我的原始html：