Question

我有一个文本区域，如果需要，我会自动调整大小。我有它工作，但我看到一个我不明白的小问题。

在我的元素上，我打电话给keyup。在那里，我将滚动高度设置为文本区域。因此，当用户点击进入时，它将会增长。我的问题是，当用户第一次进入文本区域并开始输入框时，会延伸一点点。但我不明白滚动高度如何变化。任何人都可以向我解释为什么会这样吗？如果您运行代码，每次进入输入时都会看到文本跳跃，不用担心。干杯以下是我的代码：

<!DOCTYPE html>

<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
}

.Conor{
min-height: 20px; /* for default height */
    overflow: hidden;
    resize: none;
    padding: 4px;
    font-size: 14px;
    border: 1px solid #000;

}

<body>

<div class='containter' >
<div>
    fghfghg
</div>
<textarea class='textArea' rows = 2 style='width: 60%'>

</textarea>
<div id="myModal" class="modal">

  <!-- Modal content -->
    <div class="modal-content">          
      <textarea class='taClass' rows = 2 style='width: 100%'></textarea>
    </div>

</div>
</div>
<div>
<textarea> this is a test</textarea>
</div>

我的javascript：

$('.textArea').trigger('click');
var position = null;
$('.containter').on('click', '.textArea', function(){
           console.log($(this).position());
            console.log($(this).parent().attr('class'));
            position = $(this).position();
            var modal = document.getElementById('myModal');
            $('.modal').css({top: position.top, left: position.left, width: $(this).width(), height: $(this).height()});
            $('.modal').show();
            $('.taClass').height(this.scrollHeight);
            $('.taClass').focus();
    });

$('.taClass').on('keyup',function(e){
    $(this).css('height','auto');
    $(this).height(this.scrollHeight);
});

$(document).click(function(event){
        if (event.target.className != 'textArea' && event.target.className != 'taClass') {
            $('.modal').hide();
        }
});

当我输入文本区域时，滚动高度会增加

0 个答案: