基于jQuery的饭否输入框.

相信大多数人都使用过饭否。总的来说，饭否算是国内一个不错的互联网产品。个人比较喜欢。特别是那个140字的输入框，我觉得还不错，能实时的显示 “已经输入多少字”和“还可以输入多少字”。所以，这篇文章就是来讲解如何制作一个类似的输入框。

1，基本布局

所需要的元素：一个标题，一个提示字数的元素，多行输入框一个，loading图片一张，提交按钮一个。
布局涉及到2个状态："1个默认状态" 和" 1个已经超出" 的状态。
具体布局可以看下面的2个例子：
http://www.cssrain.cn/demo/fanfoutext/demo1.html
http://www.cssrain.cn/demo/fanfoutext/demo2.html

2，添加脚本

布局做好后，添加脚本就相对简单了。
很多人做这个效果的第一反应就是使用 onkeydown或者onkeyup。我以前也是，当时遇到了很多问题。
不过上次看了国外一个代码后，我改变了思路。使用的是focus + setInterval() + +blur来实现。
具体思路就是当鼠标获取焦点(onfoucs)后，添加一个setInterval(), setInterval()中的函数就是用来截取字符串的。当鼠标失去焦点后，清除interval。另外需要注意的是，在focus时，需要判断避免重复执行。
具体代码可以看Demo3:
http://www.cssrain.cn/demo/fanfoutext/demo3.html

3，ctrl+enter提交表单

这是一个很普通，但非常实用的提交方法，所以我打算添加进去。
代码如下：

$content.keydown(function(e){
if(e.ctrlKey&&e.keyCode=="13"){
...
}
})

具体代码可以也可以看Demo3:
http://www.cssrain.cn/demo/fanfoutext/demo3.html

4，改变成另外一种提示方式

Demo3中即使超过了，用户还是能输入。如果你打算超过后，就不让输入，那么请看Demo4：
http://www.cssrain.cn/demo/fanfoutext/demo4.html