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