javascript - 如果只有一行文本，则垂直居中文本区域文本

Question

我有一个 2 行高的文本区域。当文本区域中只有一行文本时，它看起来像这样:

我正在寻找的是一种方法，如果只有一行有文本，它看起来像这样:

当文本区域中有 2 行文本时，我希望它看起来像这样正常:

代码如下:

<textarea class='input_box_menu'>Test text</textarea>

.input_box_menu {
    text-align: center;
    width: 217px;
    height: 35px;
    resize: none;
    float: left;
}

非常感谢您的帮助!
谢谢，
汤帕

Answer 1

这里有一个小的 jQuery 片段，可以完全按照您的意愿执行:

$(function () {
    fixVAlign($('.input_box_menu'));
    $('.input_box_menu').on('keyup', function () {
        fixVAlign($(this))
    });
});

function fixVAlign(field) {
    if (field.val().length < 27) {
        field.css('line-height', '35px');
    } else {
        field.css('line-height', 'normal');
    }
}

这里是 jsfiddle