【鬥醫】【15】Web應用開發50天 之 易用性問題

標籤：高度   textarea   自適應   

在介紹HTML富文本使用之前，先解決幾個易用性的問題650) this.width=650;" src="http://img.baidu.com/hi/face/i_f03.gif" alt="i_f03.gif" />

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);

});

效果如所示：

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/2D/16/wKiom1OTQWji0RQIAAF5QKSjeas998.jpg" title="超長提示.png" alt="wKiom1OTQWji0RQIAAF5QKSjeas998.jpg" />

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);

        });

    });

}

效果如所示：

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/2D/17/wKioL1OTQNagMhM3AAEla2C4mvU735.jpg" title="自動擷取焦點.png" alt="wKioL1OTQNagMhM3AAEla2C4mvU735.jpg" />

【題外話】：

一個系統的好壞，真的不在於它使用了哪些牛的技術，對於使用者來講就是易用性，拿iphone來講它的app並不是全都好用，只是把其中的某個點做到了極致；facebook的成功亦是如此，它開始時就把其中的幾個點做的很體貼。

本文出自 “青客” 部落格，請務必保留此出處http://qingkechina.blog.51cto.com/5552198/1423592