I create a move placeholder, the issue is that when i blur from the element outside the window it behave different than if i blur from the element inside the window.
Note: The implementation works but that behave from the gif is only when is blur (outside chrome) but when is blur inside it behaves good.
$('input[type=text],input[type=tel],[type=number],[type=email]')
.focus(function () {
changeLabel($(this));
}).blur(function () {
changeLabel($(this));
});
function changeLabel(element) {
if ($(element).is('input')) {
var $label = $(element).parent().find('span.label-click')
if ($label && $label.hasClass('down')) {
var elmHeight = parseFloat($(element).css('height'));
var fontSizeLabel = "12pt"
if ((elmHeight >= 0) && (elmHeight <= 30)) {
fontSizeLabel = "7pt"
$(element).css("padding-top", "12px");
}
if ((elmHeight > 30) && (elmHeight <= 40)) {
fontSizeLabel = "8pt"
$(element).css("padding-top", "14px");
}
if ((elmHeight > 40) && (elmHeight <= 50)) {
fontSizeLabel = "10pt"
$(element).css("padding-top", "14px");
}
if ((elmHeight > 50)) {
fontSizeLabel = "12pt"
$(element).css("padding-top", "14px");
}
$label.animate({
"top": ($(element).position().top) + parseFloat($(element).css("margin-top")) + "px",
"padding-top": "2px",
"left": ($(element).position().left) + "px",
"padding-left": (parseFloat($(element).css("margin-left")) + 5) + "px",
"font-size": fontSizeLabel
}, 200);
$label.removeClass("down");
$label.addClass("up");
return;
} else if ($label.hasClass('up') && !$(element).val()) {
var elmHeight = parseFloat($(element).css('height'));
var elmWidth = parseFloat($(element).css('width'));
var fontSizeLabel = "12pt"
if ((elmHeight >= 0) && (elmHeight <= 30)) {
fontSizeLabel = "8pt"
$(element).css("padding-top", "12px");
}
if ((elmHeight > 30) && (elmHeight <= 40)) {
fontSizeLabel = "10pt"
$(element).css("padding-top", "14px");
}
if ((elmHeight > 40) && (elmHeight <= 50)) {
fontSizeLabel = "12pt"
$(element).css("padding-top", "16px");
}
if ((elmHeight > 50)) {
fontSizeLabel = "16pt"
$(element).css("padding-top", "16px");
}
topLabel = (($(element).outerHeight() / 2) - ($label.outerHeight() / 2)) + parseFloat($(element).css("margin-top")) + "px";
$label.animate({
"top": topLabel,
"left": "0px",
"padding-top": "0px",
"padding-left": ($(element).position().left + (parseFloat($(element).css("margin-left"))) + 10) + "px",
"font-size": fontSizeLabel,
}, 200);
$label.removeClass("up");
$label.addClass("down");
return;
}
}
}
Behave GIF: http://ift.tt/2AGrK37
Aucun commentaire:
Enregistrer un commentaire