Question

当您单击输入时，我试图使浮动标签浮动。我正在使用CSS和jquery（这是在jquery mobile 1.4.4平台上）。我的代码似乎只适用于数据角色为＆＃34; none，＆＃34;它不会在正常输入上工作。如何在正常输入下完成这项工作？

这是我的CSS：

    .inputAnimation {
  display: inline-block;
  position: relative;
  margin: 0 0px 0 0;
}


.inputAnimation label {
  position: absolute;
  top: 5px;
  left: 15px;
  font-size: 12px;
  color: #aaa;
  transition: .1s all linear;
  cursor: text;
}

.inputAnimation.active label {
  top: -15px;
}

这是我的HTML：

<div data-role="page" id="signUpPage">
<div data-role="main" class="ui-content">
    <form>

        <div class="inputAnimation">
            <label for="username">Name</label>
            <input id="username" name="username" type="text" />
        </div>
        <div class="inputAnimation">
            <label for="email">Email</label>
            <input data-role="none" id="email" name="email" type="text" />
        </div>
    </form>
</div>

这是我的jquery

 $(document).ready(function () {

    $('input').each(function () {

        $(this).on('focus', function () {
            $(this).parent('.inputAnimation').addClass('active');
        });

        $(this).on('blur', function () {
            if ($(this).val().length == 0) {
                $(this).parent('.inputAnimation').removeClass('active');
            }
        });

        if ($(this).val() != '') $(this).parent('.inputAnimation').addClass('active');

    });
});

这是演示

Link to the jsfiddle

谢谢！

Answer 1

当jQM增强输入时，它会添加一个DIV，使得.inputAnimation现在是输入的祖父，而不是父。最简单的更改是使用.parents()而不是.parent()方法：

$('input').each(function () {

    $(this).on('focus', function () {
        $(this).parents('.inputAnimation').addClass('active');
    });

    $(this).on('blur', function () {
        if ($(this).val().length == 0) {
            $(this).parents('.inputAnimation').removeClass('active');
        }
    });

    if ($(this).val() != '') $(this).parents('.inputAnimation').addClass('active');

});

更新了 FIDDLE

浮动标签不适用于jquery mobile 1.4.4

1 个答案: