Question

这是我的jsFiddle：http://jsfiddle.net/7NdHM/3/

单击标签后，缩小文本大小以留出空间以查看正在写入的内容。此外，当用户在输入区域外单击时，文本将恢复为原始大小。所有这一切都运作良好。我的问题是当我点击浏览器中的另一个标签然后我回来时光标仍然在textarea内（这很好），但标签恢复正常（全尺寸），这是错误的。

我认为它与使用onBlur事件有关，如果是这种情况，是否有其他方法只有当光标不在textarea内时才能将文本设置为完整大小？

这是HTML：

<div class="input">
    <label>Multiple lines and a floating label</label>
    <textarea rows="fit" placeholder aria-label="Multiple lines and a floating label" aria-invalid="false" fit></textarea>
    <div class="border-bottom">
        <div class="underline"></div>
        <div class="underlineHighlight"></div>
    </div>
    <div class="errorContainer">
      <div class="error" role="alert" aria-hidden="true"></div>
      <div class="errorIcon"></div>
    </div>
</div>

JS：

$$('.input').addEvent('click', function(e) {
    var target = document.id(e.target),
        input = (target.match('.input'))?target:target.getParent('.input'),
        textarea = input.getChildren('textarea')[0],
        label = input.getChildren('label')[0],
        underlineHighlight = input.getChildren('.underlineHighlight')[0];

    textarea.focus();

    //if () {
        label.addClass('animate');
        underlineHighlight.addClass('animate');
    //}
});

$$('.input textarea').addEvent('blur', function(e){
    var target = document.id(e.target),
        input = target.getParent('.input'),
        textarea = input.getChildren('textarea')[0],
        label = input.getChildren('label')[0];

    label.removeClass('animate');
});

CSS：

.input {
    height: 73px;
    width: 320px;
}

.input label {
    position: absolute;
    height: 19px;
    margin-top: 24px;
    float: left;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

.input label.animate {
    color: #4059a9;
    -moz-transform: scale(0.7) translateY(-27px);
    -webkit-transform: scale(0.7) translateY(-27px);
    -o-transform: scale(0.7) translateY(-27px);
    -ms-transform: scale(0.7) translateY(-27px);
    transform: scale(0.7) translateY(-27px);
}

.input textarea {
    width: 320px;
    height: 19px;
    resize: none;
    -webkit-writing-mode: horizontal-tb;
    -webkit-appearance: textarea;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    flex-direction: column;
    cursor: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    outline: none;
    border: 0 none;
    padding: 0;
    margin: 24px 0 0 0;
    font: inherit;
}

.input .border-bottom {
    top: 35px;
}

.input .underline {
    height: 1px;
    background: #757575;
    border-bottom-color: #757575;
}

.input .underlineHighlight {
    color: #4059a9;
    background: #4059a9;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
}

.input .underlineHighlight.animate {
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
    -webkit-transform: scale(1);
    background: #4059a9;
}

.input .errorContainer {
    height: 24px;
}

以下是我尝试使用CSS3和Mootools重现的内容：http://www.polymer-project.org/components/paper-elements/demo.html#paper-input（最后一个输入）。

如何知道textarea中的光标是否仍处于活动状态？

0 个答案: