码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-06-10 23:25:23      阅读:309      评论:0      收藏:0      [点我收藏+]

标签:高度   textarea   自适应   

在介绍HTML富文本使用之前,先解决几个易用性的问题bubuko.com,布布扣

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

});


效果如下图所示:

bubuko.com,布布扣


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

        });

    });

}


效果如下图所示:

bubuko.com,布布扣



【题外话】:

一个系统的好坏,真的不在于它使用了哪些牛的技术,对于用户来讲就是易用性,拿iphone来讲它的app并不是全都好用,只是把其中的某个点做到了极致;facebook的成功亦是如此,它开始时就把其中的几个点做的很体贴。



本文出自 “青客” 博客,请务必保留此出处http://qingkechina.blog.51cto.com/5552198/1423592

【斗医】【15】Web应用开发50天 之 易用性问题,布布扣,bubuko.com

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

标签:高度   textarea   自适应   

原文地址:http://qingkechina.blog.51cto.com/5552198/1423592

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!