Javascript-compatible placeholder attributes _ javascript skills

This article details the placeholder attribute compatible with js. If you need it, you can refer to the programmer developed as a. net background. Most of the blogs are front-end blogs. Is it time to consider changing the direction and switch to the front-end for development...

I am confused about whether or not I should change jobs recently. I have a difficult choice!

Continue to the front-end. This time, let's talk about the placeholder attribute in the input box.

The new attribute of html5 is the prompt text (your own understanding) displayed when no value is entered in the input box. For example:

It seems to be very useful, but it can only be displayed in a browser version that supports html. For a browser version that cannot be supported, it is uncomfortable for me to pursue perfection.

I have found a lot of information online, and many cool people already have solutions, but there are more or less some defects. Here I will make an integration and modification:

(I forgot how many others read the code and what the address is. I am sorry to the other original authors. If you have any copyright questions, please contact me! -.-)

In my opinion, this kind of extension looks like a beauty to the browser interface function, and I always insist that what is naturally the most beautiful. So in the browser version that supports this attribute, I don't have to make any other modifications.

First, determine whether this attribute is supported:

The Code is as follows:

If (! ('Holder' in document. createElement ('input '))){}

If not, work is coming.

Retrieve all input: text/input: password/textarea with the placeholder attribute, obtain the value of their placeholder attributes, and then simulate the function. Add a label after each label to display the value of placeholder, when the input value is used, the displayed string is cleared. When the input value is deleted, the displayed string is displayed.

The Code is as follows:

Var $ element = $ (this), placeholder = $ element. attr ('placeholder ');

If (placeholder ){
// Text box ID
Var elementId = $ element. attr ('id ');
If (! ElementId ){
Var now = new Date ();
ElementId = 'lbl _ placeholder '+ now. getSeconds () + now. getMilliseconds ();
$ Element. attr ('id', elementId );
}

// Add a label to display the value of placeholder.
Var $ label = $ ('',{
Html: $ element. val ()? '': Placeholder,
'For': elementId,
Css:
{
Position: 'absolute ',
Cursor: 'text ',
Color: '# a9a9a9 ',
FontSize: $element.css ('fontsize '),
FontFamily: $element.css ('fontfamily ')
}
}). InsertAfter ($ element );

// Bind events
Var _ setPosition = function (){
Export label.css ({marginTop: getstringnumvalue(export element.css ('margintop ') + 8 + 'px', marginLeft: '-' + (getstringnumvalue(export element.css ('width')-6) + 'px '});
}
Var _ resetPlaceholder = function (){
If ($ element. val () {export label.html (null );}
Else {
_ SetPosition ();
Label.html (placeholder );
}
}
_ SetPosition ();
$ Element. on ('focus blur input keyup propertychange resetplaceholder ', _ resetPlaceholder );

The code is very simple. Note the following:

1. The label's margin-top/margin-left, because our project uses the bootstrap framework, we have set the inner spacing of the input box to "padding: 4px 6px; "So we need to indent the corresponding pixel value here.

2. GetStringNumValue () is a custom method. It uses a regular expression to extract numbers from a string. For example, "123px" returns 123.

3. For versions not supported by IE, propertychange is a perfect combination !...

4. The extension method resetplaceholder is used to set the value of placeholder when the value of the input box is changed by js (Value assignment and clearing.

Effect:

-- IE8

-- IE9