lundi 8 janvier 2018

When focusout but outside windows behave different if focusout inside window?

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