javascript - Like 占位符文本在 Firefox 中无法完美运行

Question

我想点击以下链接:

JS Fiddle

当我在其他浏览器(chrome 和 IE)中测试时，它工作正常(每当我调整浏览器屏幕大小时，文本都会粘在文本框中)。

但是当涉及到 firefox 时，一切都搞砸了，所以我使用了仅适用于 firefox 的 CSS hacks。

一切正常，因为我使用了媒体查询并使用了仅适用于 firefox 的位置。

但是，当涉及到较小的屏幕(小于 768 像素)时，文本不会粘在左侧，而是粘在右侧并跟随屏幕尺寸。

您可以通过以下链接进行测试:

Bootply

这是代码本身:

HTML:

<div class="container-fluid">
        <div class="container">
            <div class="row padding-row">
                <img class="img-responsive pull-left center-img" src="http://icons.iconarchive.com/icons/uiconstock/e-commerce/128/E-Commerce-Icon-Set-icon.png">
                <h2 class="text-center">My Website</h2>
            </div>
            <div class="form-group input-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                <label class="control-label" for="txtUsername">Username</label>
                <input id="txtUsername" class="form-control" type="text">
            </div>
            <div class="form-group input-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
                <span class="input-group-addon"><i class="fa fa-key"></i></span>
                <label class="control-label" for="txtPassword">Password</label>
                <input id="txtPassword" class="form-control" type="password">
            </div>
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                <button id="btnSubmit" class="btn btn-default form-control" data-toggle="popover" data-content="Submit">Log In</button>
            </div>
        </div>
    </div>

CSS:

/* ---- REGION GENERAL ---- BEGIN */

body {
    background-color: #292929;
    font-size: 14px;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    color: white;
}

div[class*="col-"] {
    padding-right: 0px;
}

.input-group[class*="col-"] {
    float: left;
    padding: 0 0 0 15px;
}

.input-group-addon {
    min-width: 40px;
}

.form-control {
    height: 40px;
    align-self: flex-end;
}

.control-label {
    font-size: 14px;
    font-weight: 400;
    opacity: .6;
    pointer-events: none;
    position: absolute;
    transform: translate3d(10px, 10px, 0px) scale(1);
    transform-origin: left top;
    transition: 300ms;
    z-index: 999;
    color: black;
}

.form-group.focused .control-label {
    transform: translate3d(10px, 0px, 0px) scale(.75);
    z-index: 998;
}

.popover-content {
    color: black;
}

@-moz-document url-prefix() {
    .control-label {
        float: left;
        transform: translate3d(-225px, 10px, 0px) scale(1);
    }

    .form-group.focused .control-label {
        float: left;
        transform: translate3d(-225px, 0px, 0px) scale(.75);
    }
}

@media only screen and (min-width: 768px) {
    @-moz-document url-prefix() {
        .control-label {
            margin-left: 50px;
        }

        .form-group.focused .control-label {
            margin-left: 50px;
        }
    }
}

@media only screen and (min-width: 992px) {
    @-moz-document url-prefix() {
        .control-label {
            margin-left: -20px;
        }

        .form-group.focused .control-label {
            margin-left: -20px;
        }
    }
}

@media only screen and (min-width: 1200px) {
    @-moz-document url-prefix() {
        .control-label {
            margin-left: -90px;
        }

        .form-group.focused .control-label {
            margin-left: -90px;
        }
    }
}

/* ---- REGION GENERAL ---- END */

/* ---- REGION LOGIN PAGE ---- BEGIN */

.padding-row {
    padding-bottom: 20px;
}

.center-img {
    margin-top: 20px;
}

@media only screen and (min-width: 383px) {
    .center-img {
        margin-top: 0px;
    }
}

/* ---- REGION LOGIN PAGE ---- END */

JS:

$(document).ready(function () {
            $(window).resize(function () {
                $('.container').css({
                    position: 'absolute',
                    left: ($(window).width() - $('.container').outerWidth()) / 2,
                    top: ($(window).height() - $('.container').outerHeight()) / 2
                });
            });

            $(window).resize();

            $('.form-control').on('focus blur', function (e) {
              $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
                }).trigger('blur');
        })

非常感谢您的回答。

谢谢。

Answer 1

由于 css 对浏览器的作用不同，我们应该针对特定浏览器。将其添加到您的 css。

input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */