浮动标签不适用于 jquery 移动版 1.4.4

Question

我正在尝试让浮动标签在您单击输入时浮动。我正在使用 CSS 和 jquery（这是在 jquery 移动 1.4.4 平台中）。我的代码似乎只适用于数据角色为 "none," 的输入，它不适用于普通输入。我怎样才能使它在正常输入下工作？

这是我的 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 现在是输入的大 parent，而不是 parent。最简单的更改是使用 .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');

});

Updated FIDDLE

浮动标签不适用于 jquery 移动版 1.4.4

Floating Label not working on jquery mobile 1.4.4

labels

floating

jquery-mobile