夜の歌

プログラミング、音楽、本について緩く書いていきます。

Twitterの入力フォームみたいなの

jQuery

jQueryで、Twitterの入力フォームみたいなのを作る。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
<span class="count">140</span>
<textarea id="text_area"></textarea>
<a id="error_message"></a>
<input type="submit" id="submit" name="submit"/>
</body>
</html>

続いて、JavaScript

//script.js
$(function () {
    var tweetNumber = 140;
    var remnantTweet;
    $('#text_area').bind('keydown keyup keypress change', function () {
        var thisValueLength = $(this).val().length;
        remnantTweet = tweetNumber - thisValueLength;
        $('.count').html(remnantTweet);
        if (remnantTweet > -1) {
            $('#submit').removeAttr('disabled');
        } else {
            $('#submit').attr('disabled', 'disabled');
        }
    })
    $('#submit').click(function () {
        alert('aho');
    });
});

こんな感じでございます。久しぶりのJavaScriptで書くのが難しい！
下記のサイトを参考にして、作りました。

参照URL：
jQueryで入力フォームに文字カウント（カウントダウン）を設置する方法 | BlackFlag

jQuery でフォームの disabled を解除したり有効化する方法 | ウェブル