In Sencha toucha2, set the color of the PlaceHolder attribute of the text box by default.

When I was working on a project, I wanted to change the text color of a text box to make it more eye-catching. However, the default PlaceHolder color is gray. After several attempts and materials, I finally understood it. You only need a CSS style.

HTML5 has made many enhancements to Web Form, such as the type and Form Validation added by input. Placeholder is another new attribute of html5. when this attribute is set in input or textarea, the content of this value will be displayed as a gray prompt in the text box. When the text box gets the focus, the prompt text disappears. Previously, JavaScript was used to control this effect:
[Html]
<Input id = "t1" type = "text" placeholder = "Enter text"/>

Since placeholder is a new property and currently only a few browsers support it, how can we check whether the browser supports it? (More HTML5/CSS3 features can be accessed)
[Javascript]
Function hasPlaceholderSupport (){
Return 'placeholder' in document. createElement ('input ');
}

By default, the prompt text is gray. You can use CSS to change the text style:

[Css]
/* All */
:-Webkit-input-placeholder {color: # f00 ;}
Input:-moz-placeholder {color: # f00 ;}

/* Individual: webkit */
# Field2:-webkit-input-placeholder {color: # 00f ;}
# Field3:-webkit-input-placeholder {color: #090; background: lightgreen; text-transform: uppercase ;}
# Field4:-webkit-input-placeholder {font-style: italic; text-decoration: overline; letter-spacing: 3px; color: #999 ;}

/* Individual: mozilla */
# Field2:-moz-placeholder {color: # 00f ;}
# Field3:-moz-placeholder {color: #090; background: lightgreen; text-transform: uppercase ;}
# Field4:-moz-placeholder {font-style: italic; text-decoration: overline; letter-spacing: 3px; color: #999 ;}

Compatible with other browsers that do not support placeholder:

[Css]
Var PlaceHolder = {
_ Support: (function (){
Return 'placeholder' in document. createElement ('input ');
})(),

// The style of the prompt text, which must be defined elsewhere on the page
ClassName: 'abc ',

Init: function (){
If (! PlaceHolder. _ support ){
// If textarea is not processed, you need to add
Var inputs = document. getElementsByTagName ('input ');
PlaceHolder. create (inputs );
}
},

Create: function (inputs ){
Var input;
If (! Inputs. length ){
Inputs = [inputs];
}
For (var I = 0, length = inputs. length; I <length; I ++ ){
Input = inputs [I];
If (! PlaceHolder. _ support & input. attributes & input. attributes. placeholder ){
PlaceHolder. _ setValue (input );
Input. addEventListener ('focal ', function (e ){
If (this. value = this. attributes. placeholder. nodeValue ){
This. value = '';
This. className = '';
}
}, False );
Input. addEventListener ('blur', function (e ){
If (this. value = ''){
PlaceHolder. _ setValue (this );
}
}, False );
}
}
},

_ SetValue: function (input ){
Input. value = input. attributes. placeholder. nodeValue;
Input. className = PlaceHolder. className;
}
};

// Initialize all input during page Initialization
// PlaceHolder. init ();
// Or set an element separately
// PlaceHolder. create (document. getElementById ('t1 '));