【斗医】【15】Web应用开发50天 之 易用性问题

在介绍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

【斗医】【15】Web应用开发50天 之 易用性问题,古老的榕树,5-wow.com