"Dou Medical" "15" Web application development 50 days of ease-of-use issues

Before introducing the use of HTML Rich text, first solve several usability problems 650) this.width=650; "src=" Http://img.baidu.com/hi/face/i_f03.gif "alt=" I_f03.gif "/>

1. TextArea height adaptive in Chrome browser There is a problem: textarea height increases when any character is entered

Workaround:

(1) define the Autoadaptheight () method in Challenge.js, with the following content:

/**

* TextArea Height Adaptive

*/

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

Determine if it is a Chrome browser

if (Window.navigator.userAgent.indexOf ("Chrome") > 0) {

if (Scrollheight-paddingtop-paddingbtm > height) {

$ (component). CSS ("height", scrollheight);

}

Return

}

$ (component). CSS ("height", scrollheight);

}

(2) Modify the Initinputcomponent () method so that it calls the Autoadaptheight () method

Setting the textarea height self-adapting

Dynamicitem.bind ("KeyUp", function (event) {

Autoadaptheight (this);

});

"Remarks":

1, in the search for relevant solutions on the Internet, a lot of this problem, the compatibility is slightly worse. There are some components on the net, interested can look at the source code

2, the effect is not good demonstration, here does not give the

2, when the title length of the gauntlet is not given a corresponding hint

Workaround:

(1) define the Setlengthhit () method in Challenge.js, with the following content:

/**

* TextArea length is exceeded when prompted

*/

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) Modify the Initinputcomponent () method so that it calls the Setlengthhint () method

Dynamicitem.bind ("KeyUp", function (event) {

Setting the textarea height self-adapting

Autoadaptheight (this);

Give a hint when the length is very long

Setlengthhint (this);

});

The effect is as follows:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/2D/16/wKiom1OTQWji0RQIAAF5QKSjeas998.jpg "title=" Extra long hint. png "alt=" wkiom1otqwji0rqiaaf5qksjeas998.jpg "/>

3, go to the next Gauntlet page, title textarea not automatically get the mouse

Workaround:

Modify the Initinputcomponent () method to add the following:

/**

* Initialize text box

*/

function Initinputcomponent () {

var textareaarray = new Array ("challenge_title_id", "challenge_prescript_id", "challenge_challenger_id");

Go to page "title textarea" Get focus

$ ("#" + textareaarray[0]). focus ();

$.each (Textareaarray, function (I, item) {

var Dynamicitem = $ ("#" + Item);

Binding placeholder

Bindplaceholder (Dynamicitem);

Dynamicitem.bind ("KeyUp", function (event) {

Setting the textarea height self-adapting

Autoadaptheight (this);

Give a hint when the length is very long

Setlengthhint (this);

});

});

}

The effect is as follows:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/2D/17/wKioL1OTQNagMhM3AAEla2C4mvU735.jpg "title=" Automatically gets the focus. png "alt=" wkiol1otqnagmhm3aaela2c4mvu735.jpg "/>

"Off topic":

A system is good or bad, really does not lie in the use of which cattle technology, for the user is easy-going, take the iphone to its app is not all good, just one of the points to achieve the ultimate, Facebook's success is the same, it started with a few of the points are very thoughtful.

This article is from the "Green Guest" blog, please be sure to keep this source http://qingkechina.blog.51cto.com/5552198/1423592