开发者社区> shy丶gril> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【斗医】【15】Web应用开发20天

简介:
+关注继续查看
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://qingkechina.blog.51cto.com/5552198/1423592

在介绍HTML富文本使用之前,先解决几个易用性的问题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);

});


效果如下图所示:

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

        });

    });

}


效果如下图所示:

wKioL1OTQNagMhM3AAEla2C4mvU735.jpg



【题外话】:

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



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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
web应用开发线上联系(题解)
1.改一下css文件,index引用的css文件名不对;
0 0
Serverless 时代,这才是 Web 应用开发正确的打开方式
如同 iPhone 当年颠覆了诺基亚,Serverless 的出现也带来了一种全新的、颠覆式的云开发架构模式。
0 0
web 应用开发最佳实践之一:避免大型、复杂的布局和布局抖动
web 应用开发最佳实践之一:避免大型、复杂的布局和布局抖动
0 0
web 应用开发最佳实践之一:避免大型、复杂的布局和布局抖动
web 应用开发最佳实践之一:避免大型、复杂的布局和布局抖动
0 0
目标全平台的Flutter支持Web应用开发了!
Flutter作为一个可移植的UI框架,已经支持现代Web应用开发了!我们很开心已经发布了SDK预览版,这样你可以在Web浏览器里直接运行你的Flutter UI代码。 原文链接:Flutter Web - 目标全平台开发的Flutter再下一城!- 汇智网 Flutter Web的目标 从去年Beta版发布以来,客户们已经使用Flutter来创建可以运行在iOS和Android上的移动应用了。
2357 0
基于阿里云打造『云原生』Web应用——『懒猪行』Web应用开发实践
『懒猪行』专注于境外自由行S2B业务,涉及分销、终端用户服务、供应链等多个服务环节,随着业务规模的不端增加,我们一直在探索Web应用开发的最佳实践,以加快Web应用的迭代效率,为B/C端用户创造更多价值。
2588 0
基于SSM的Java Web应用开发原理初探
SSM开发Web的框架已经很成熟了,成熟得以至于有点落后了。虽然如今是SOA架构大行其道,微服务铺天盖地的时代,不过因为仍有大量的企业开发依赖于SSM,本文简单对基于SSM的Java开发做一快速入门,方便读者尽快把握脉络,理解Java Web开发的主轴,便于做进一步深入学习。
1017 0
spring boot 2.0之web应用开发
web应用开发 简介 spring boot 非常适合进行web程序开发。可以通过使用spring-boot-starter-web快速创建一个内嵌tomcat或Jetty,或netty的应用。
8645 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
边缘安全,让Web加速有保障
立即下载
使用CNFS搭建弹性Web服务
立即下载
WEB框架0day漏洞的发掘及分析经验分享
立即下载