我正在Codepen上制作一个消息框。我使用
代码片段链接: https://codepen.io/gavdraws/pen/dXWpZk HTML
<textarea>
来允许文本输入时出现滚动条,但似乎并没有发生这种情况。代码片段链接: https://codepen.io/gavdraws/pen/dXWpZk HTML
<div id="container">
<span class="input message">
<textarea class="input__field" id="input-5"></textarea>
<label for="input-5" class="input__label">
<span class="input__label-content">Message</span>
</label>
</span>
</div>
JS
var $input;
function onInputFocus(event) {
var $target = $(event.target);
var $parent = $target.parent();
$parent.addClass('input--filled');
};
function onInputBlur(event) {
var $target = $(event.target);
var $parent = $target.parent();
if (event.target.value.trim() === '') {
$parent.removeClass('input--filled');
}
};
$(document).ready(function() {
$input = $('.input__field');
// in case there is any value already
$input.each(function(){
if ($input.val().trim() !== '') {
var $parent = $input.parent();
$parent.addClass('input--filled');
}
});
$input.on('focus', onInputFocus);
$input.on('blur', onInputBlur);
});
Your help would be greatly appreciated!