Detailed explanation of js compatible placeholder attribute_javascript skills

As a .net backend development programmer, most of my blogs are front-end related blog posts. Is it time to consider changing direction and switch to front-end development...

A little rant, I have recently been confused about whether I should change jobs or not. I have difficulty choosing!

Continuing with the front end, this time let’s talk about the placeholder attribute of 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 browser versions that support HTML. For browser versions that cannot support it, it is very uncomfortable for a developer like me who strives for perfection. thing.

I found a lot of information on the Internet, and many experts have already found solutions, but they all have some flaws. Here I will make an integration and modification:

(I forgot how many other people’s codes I read and what the address is. I would like to apologize to the other original authors. If you have any copyright issues, please contact me! -.-)

This kind of extension, in my opinion, is like a beautification of the browser interface function, and I always insist that natural is the most beautiful. So in the browser version that supports this attribute, I won't be too hands-on to make other modifications.

First determine whether the attribute is supported:

Copy code The code is as follows:

if (!('placeholder' in document.createElement( 'input'))) { }

If not supported, here comes the job.

Take out all input:text / input:password / textarea that have placeholder attributes, take out their respective placeholder attribute values, and then imitate the function, add a label label after each label to display the placeholder value. When the input value When , the displayed string is cleared, and when the input value is deleted, the string is displayed.

Copy code 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 label 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 event
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, please note:

1. The margin-top / margin-left of the label. Because our project uses the bootstrap framework, the inner spacing of the input box has been set to "padding: 4px 6px;" so the corresponding pixel value needs to be indented here. .

2. GetStringNumValue() is our own defined method, which uses regular expressions to extract numbers from strings. For example, "123px" returns 123.

3. For versions that are not supported in IE, propertychange is really a good method, a perfect combination! ...

4. The extension method resetplaceholder is used to set the corresponding value of the placeholder when using js to change the value of the input box (assignment, clearing).

Effect:

——IE8

——IE9