Question

我创建了一个移动占位符，问题是当我从窗口外的元素模糊时，它的行为与我从窗口内的元素模糊的行为不同。

注意：实现有效，但是只有在模糊时（在chrome之外）才能使用gif，但是当内部模糊时，它表现良好。

  <div class="form-group row">
    @if (!reverseZipcode)
    {
        <div class="col-xs-7">
            <div class="input-wrapper hide-text-input"> 
                <input type="tel" data-mask="1-000-000-0000" required name="Phone" title="@Html.GetFieldPlaceHolderText("Phone", placeHolders)" data-placement="bottom" aria-label="Telephone Number" />
                <span class="label-click down">@Html.GetFieldPlaceHolderText("Phone", placeHolders)</span>

            </div> 
        </div>
        <div class="col-xs-5 no-padding-left">
            <div class="input-wrapper hide-text-input">
                <input type="number" required name="Zip" title="@Html.GetFieldPlaceHolderText("Zip", placeHolders)" data-mask="00000" data-placement="bottom" aria-label="Zip Code" />
                <span class="label-click down">@Html.GetFieldPlaceHolderText("Zip", placeHolders)</span>
            </div>
        </div>
    }
    else
    {
        <div class="col-xs-7">
            <div class="input-wrapper hide-text-input">
                <input type="number" required name="Zip" title="@Html.GetFieldPlaceHolderText("Zip", placeHolders)" data-mask="00000" data-placement="bottom" aria-label="Zip Code" />
                <span class="label-click down">@Html.GetFieldPlaceHolderText("Zip", placeHolders)</span>
            </div>
        </div>
        <div class="col-xs-5 no-padding-left">
            <div class="input-wrapper hide-text-input">
                <input type="tel" data-mask="1-000-000-0000" required name="Phone" title="@Html.GetFieldPlaceHolderText("Phone", placeHolders)" data-placement="bottom" aria-label="Telephone Number" />
                <span class="label-click down">@Html.GetFieldPlaceHolderText("Phone", placeHolders)</span>
            </div>
        </div>
    }
</div>
<div class="form-group hide-text-input">
    <input type="email" required name="Email" title="@Html.GetFieldPlaceHolderText("Email", placeHolders)" data-placement="bottom" aria-label="Email Address" />
    <span class="label-click up">@Html.GetFieldPlaceHolderText("Email", placeHolders)</span>
</div>


$('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;
        }
    }
}

表现GIF： https://media.giphy.com/media/l0HU8NA7QrGqcIxm8/giphy.gif

NewB GIF :(行为） https://media.giphy.com/media/xULW8r9DmQGlL4cDh6/giphy.gif

Answer 1

也许这可以帮助

CSS：

input.inp {
    padding: 18px 5px 4px 5px;
    background: none;
}

input.inp ~ label {
    position: absolute;
    top: 14px;
    left: 10px;
    cursor: text;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    font-weight: 300;
}

input.inp ~ label.error {
    font-size: 0.75rem;
    position: absolute;
    top: auto;
    bottom: -30px;
    left: 0;
}

input.inp ~ label.active {
    font-size: 0.75rem;
    top: 4px;
}

.group {
    position: relative;
    margin-bottom: 16px;
}

HTML：

<div class="group">
    <input class="inp">
    <label class="label">Label</label>
</div>

JS：

$(function () {
    $('input.inp').on('focus', function () {
        $(this).siblings('.label').addClass('active');
    });
    $('input.inp').on('blur', function () {
        $(this).siblings('.label').removeClass('active');
        if ($(this).val() !== '') {
            $(this).siblings('.label').addClass('active');
        } else {
            $(this).siblings('.label').removeClass('active');
        }
    });
});

当焦点输出但外部窗口在窗口内聚焦时表现不同？

1 个答案: