テキストがボックスサイズを超えるとスクロールしない

Question

私はcodepenのメッセージボックスで作業しています。私は<textarea>を使ってテキスト入力のスクロールボックスを許可していますが、これは起こっていないようです。

CodePen：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); 
}); 

あなたの助けをいただければ幸いです！

Answer 1

<label>はテキスト領域の前にあるため、スクロールしません。 .input__label divにpointer-events: none;を追加してください。 TEXTAREA textarea.input__field {z屈折率とz屈折率を添加

.input__label { 
    pointer-events: none; 
} 

CodePen