Twitter は140文字までしか投稿できない。
はてなブックマークからTwitterに連携投稿するときはコメント文字数に気をつけないと途中で切れてしまう。
Twitter に投稿するはてなブックマークコメントの入力上限は118文字 (残り22文字)。
そこで、投稿前に HTML + JavaScript で Twitter に投稿する際の文字数チェックを作ってみた。
⇒ counting characters for twitter
動きとしては Twitter の投稿フィールドっぽいのを作ってみようと思った。
ユーザーが入力するたびに残り入力文字数が変化するように。
まず、最初に試してみたのは JavaScript の change イベント (onchange)。ただ、これは入力フィールドからフォーカスがはずれないとイベントが発生しない。
Twitter の窓はちゃんとリアルタイムにやっているので、これじゃダメだ。
じゃあ、リアルタイムにやるにはキー入力を感知しようと考えて keyup イベント (onkeyup) を使ってみた。
しかし、これじゃマウスでコピペしたときに反応しない。
解決しそうに思えても、また問題が出てきて、解決に時間がかかる。
Twitter はどうやってやってるのか調べてみたくなった。
HTMLタブ内の要素に対する右クリックメニューから、対象の要素に発生する全てのイベントをコンソールタブに出力することが可能です。
Firebugの意外と知られていない機能紹介（プログラマ向け） | tech.kayac.com - KAYAC engineers' blog
というわけで、Twitter 窓にコピペしたときの挙動を Firebug で調べてみたら paste/onpaste, contextmenu/oncontextmenu, input/oninput というイベントが発生していた。
oninput が使えそう、と判断して input イベントを使うようにしてみた。
以下、HTML + JavaScript のコード。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>counting characters for twitter</title>
<script>
var textarea;
var numberdisplay1;
var numberdisplay2;
function update(){
var n1 = textarea.value.length;
var n2 = 140 - n1;
numberdisplay1.innerHTML = "" + n1;
numberdisplay2.innerHTML = "" + n2;
}
function init(){
textarea = document.getElementById('textarea');
numberdisplay1 = document.getElementById('numberdisplay1');
numberdisplay2 = document.getElementById('numberdisplay2');
textarea.addEventListener("input", update);
}
window.onload = init;
</script>
</head>
<body style="margin: 10px; padding: 10px;">
<h1 style="font-size: medium;">counting characters for twitter</h1>
<div style="width: 500px; border: solid 0px; ">
<div>What's happening?</div>
<div><textarea id="textarea" style="width: 100%; height: 100px;"></textarea></div>
<div style="width: 100%;">
<div id="numberdisplay1" style="float: left; border: solid 0px;">0</div>
<div id="numberdisplay2" style="float: right; border: solid 0px;">140</div>
</div>
<div style="clear: both;"></div>
</div>
<div style="clear: both; font-size: small; margin-top: 20px;">
* Twitter のツイート入力上限は 140 : 0<br />
* Twitter に投稿するはてなブックマークコメントの入力上限は 118 : 22 (2011-10-28 現在)<br />
* Twitter にURL付き投稿するツイートの入力上限(URLとその直前の空白文字をカウントに含まない)は 119 : 21 (2011-10-28 現在)<br />
</div>
</body>
</html>
ちゃんと動いている。満足！
Ref.
- counting characters for twitter
- oninput - MDN
tags: twitter hatena_bookmark javascript
Posted by NI-Lab. (@nilab)
