当文本超过框的大小时，文本区域不会滚动

Question

我正在Codepen上制作一个消息框。我使用<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!

- Gavin Friel

---

尝试为textarea添加z-index属性textarea.input__field { z-index: 1000; } - Pratik Deshmukh

Answer 1

你的<label>在文本区域前面，所以它不会滚动。将pointer-events: none;添加到你的.input__label div中。

.input__label {
  pointer-events: none;
}

CodePen

- Hunter Turner