JS compatible placeholder attributes detailed _javascript skills

As a. NET backstage development of the program ape, since most of the blog is the front-end related blog. Should consider changing direction, turn front end develop ...

Small spit trough, recently by the should not job-hopping confused, I have the choice of difficult disease!

Continue the front end, this time say the input box placeholder this property.

The new property of HTML5 is the prompt text that appears when the input box has not entered a value, for example:

It looks good, but it can only be shown in browsers that support HTML, and for browsers that can't be supported, it's uncomfortable for me to pursue the perfect developer.

On the internet to find a lot of information, there are many people have a solution, but more or less have some defects, here I do a consolidation and modification:

(Forget how many other people's code, also forget what the address is, in this to other original author said sorry, if there are copyright issues please contact me!) -.-）

This kind of expansion, in my opinion is like a browser interface function to do a beauty, and I always adhere to, natural is the most beautiful. So in a browser version that supports this kind of property, I don't have to make any more changes.

First, determine if the attribute is supported:

Copy Code code as follows:

if (! (' Placeholder ' in document.createelement (' Input '))}

If it's not supported, work is coming.

Take out all the input:text/input:password/textarea that have the placeholder property, take out the respective placeholder property values, and then mimic the function, and add a label tag behind each label to display the PLACEH Older value, when the value is entered, empty the displayed string, and when the input value is deleted, the string is displayed.

Copy Code code 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);
}

To add a label label to display the value of a placeholder
var $label = $ (' <label> ', {
HTML: $element. val ()? ": Placeholder,
' For ': ElementID,
Css:
{
Position: ' Absolute ',
Cursor: ' Text ',
Color: ' #a9a9a9 ',
FontSize: $element. css (' fontsize '),
fontFamily: $element. css (' fontFamily ')
}
}). InsertAfter ($element);

Binding events
var _setposition = function () {
$label. css ({margintop:getstringnumvalue ($element. css (' margintop ')) + 8 + ' px ', marginleft: '-' + (Getstringnumvalue ($ Element.css (' width ')-6) + ' px '});
}
var _resetplaceholder = function () {
if ($element. Val ()) {$label. html (NULL);
else {
_setposition ();
$label. html (placeholder);
}
}
_setposition ();
$element. On (' focus blur input KeyUp propertychange resetplaceholder ', _resetplaceholder);

The code is very simple, you should note that:

1, label Margin-top/margin-left, because our project uses the bootstrap frame, has set the input box spacing is "padding:4px 6px;" So here we need to indent the corresponding pixel value.

2, Getstringnumvalue () is our own definition of the method, using regular expressions, used to extract the number of strings, such as "123px" return 123.

3, for IE not supported version, PropertyChange is really a good method, the perfect combination! ...

4, the extension method Resetplaceholder, uses the JS to change the input box value (Assignment, empties), carries on the value to the placeholder the corresponding setting.

Effect:

--ie8

--ie9