Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save yoshifumi0521/4543302 to your computer and use it in GitHub Desktop.
Save yoshifumi0521/4543302 to your computer and use it in GitHub Desktop.
Twitterの140文字制限のUIがよかったので、実装してみた。jQueryを使用。
//テキストエリア
<textarea id="text_area"></textarea>
//残りの文字数の表示
<p>残りの文字数 <span="count"></p>
//送信ボタン
<input type="submit" value="送信" id="submit">
<script>
$(function(){
//テキストエリアのDOMを取得
var textArea = $("#text_area");
//テキストの入力の文字数の変数
var textAreaLength;
//文字数のカウントのオブジェクト
var count = $("#count");
//テキストエリアの最大文字数の定数
var MAX_LENGTH = 140;
//カウントに文字数をいれる。最大文字数の定数をいれる
count.html(MAX_LENGTH);
//送信ボタンのDOM
var submit = $("#submit");
//テキストエリアで文字を入力するごとにする処理
textArea.bind("keydown keyup keypress change",function(){
//テキストエリアの文字数を取得する。
textAreaLength = $(this).val().replace(/\s| /gm,'').length;
//最大文字数との差額をだす。
var diff = MAX_LENGTH - textAreaLength;
if ( diff >= 0) {
//文字制限を超えてない場合
//文字数を変化させる
count.html("<span>"+ diff + "</span>");
//送信ボタンを押せるようにする。
submit.disabled= false;
}else{
//文字制限を超えた場合
//文字数を変化させる。
count.html("<span style='color: red'>-"+ diff + "<span>");
//送信ボタンを押せないようにする。
submit.disabled= true;
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment