原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://qingkechina.blog.51cto.com/5552198/1423592
在介绍HTML富文本使用之前，先解决几个易用性的问题
1、在chrome浏览器中textarea高度自适应存在问题：当输入任何一个字符时textarea高度都会增加
解决办法：
（1）在challenge.js中定义autoAdaptHeight()方法，内容如下：
/**
* textarea高度自适应
*/
function autoAdaptHeight(component){
var paddingTop = parseInt($(component).css("padding-top"));
var paddingBtm = parseInt($(component).css("padding-bottom"));
var scrollHeight = component.scrollHeight;
var height = $(component).height();
// 判断是否为chrome浏览器
if(window.navigator.userAgent.indexOf("Chrome") > 0){
if(scrollHeight - paddingTop - paddingBtm > height){
$(component).css("height", scrollHeight);
}
return;
}
$(component).css("height", scrollHeight);
}
(2)修改initInputComponent()方法，使其调用autoAdaptHeight()方法
// 设置textArea高度自适应
dynamicItem.bind("keyup", function(event){
autoAdaptHeight(this);
});
【备注】：
1、在网上搜索相关解决方案时，很多都存在此问题，对兼容性做的稍差一些。网上也有一些组件，感兴趣的可以看一下源码
2、效果不好演示，这里就不给出效果图了
2、当战书标题长度超长时没有给出相应的提示
解决办法：
（1）在challenge.js中定义setLengthHit()方法，内容如下：
/**
* textarea长度超出时提示
*/
function setLengthHint(component){
if(component.id == "challenge_title_id"){
if(!component.value){
return;
}
var titleId = $("#challenge_title_hint_id");
if(component.value && component.value.length > 96){
titleId.parent().show();
} else {
titleId.parent().hide();
}
titleId.text(component.value.length - 96);
}
}
（2）修改initInputComponent()方法，使其调用setLengthHint()方法
dynamicItem.bind("keyup", function(event){
// 设置textArea高度自适应
autoAdaptHeight(this);
// 长度超长时给出提示信息
setLengthHint(this);
});
效果如下图所示：
3、进入下战书页面，标题textarea没有自动获取鼠标
解决办法：
修改initInputComponent()方法，添加如下内容：
/**
* 初始化文本框
*/
function initInputComponent(){
var textareaArray = new Array("challenge_title_id", "challenge_prescript_id", "challenge_challenger_id");
// 进入页面"标题textarea"获取焦点
$("#" + textareaArray[0]).focus();
$.each(textareaArray, function(i, item){
var dynamicItem = $("#" + item);
// 绑定PlaceHolder
bindPlaceHolder(dynamicItem);
dynamicItem.bind("keyup", function(event){
// 设置textArea高度自适应
autoAdaptHeight(this);
// 长度超长时给出提示信息
setLengthHint(this);
});
});
}
效果如下图所示：
【题外话】：
一个系统的好坏，真的不在于它使用了哪些牛的技术，对于用户来讲就是易用性，拿iphone来讲它的app并不是全都好用，只是把其中的某个点做到了极致；facebook的成功亦是如此，它开始时就把其中的几个点做的很体贴。
本文出自 “青客” 博客，请务必保留此出处http://qingkechina.blog.51cto.com/5552198/1423592