直播帶貨原始碼，評論框自動控制高度

直播帶貨原始碼，評論框自動控制高度

HTML

<div class="cont_comment_cont">
    <div id="textareaHeight">
        <textarea id="textarea" placeholder="在此輸入評論內容~"></textarea>
    </div>
    <div>釋出</div>
</div>

CSS

/* textarea配置 */
textarea {
    padding: 0;
    margin: 0;
    list-style: none
}
textarea::-webkit-input-placeholder,
textarea:-moz-placeholder,
textarea::-moz-placeholder,
textarea:-ms-input-placeholder {
    color: #CFD0D1 !important;
}
/* 整體控制 */
.cont_comment_cont {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
/* 評論框樣式 */
.cont_comment_cont>div:nth-child(1) {
    padding: 20px 16px 20px 20px;
    width: 698px;
    height: 25px;
    border-radius: 5px;
    border: 0;
    background-color: #F0F3F5;
}
/* 富文字框樣式 */
.cont_comment_cont textarea {
    width: 702px;
    height: 100%;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 25px;
    color: #050E26;
    border-radius: 5px;
    resize: none;
    border: 0;
    background-color: #F0F3F5;
    outline: none;
    overflow-y: hidden;
}
/* 按鈕樣式 */
.cont_comment_cont>div:nth-child(2) {
    width: 126px;
    height: 65px;
    background: rgba(80, 94, 255, 1);
    border-radius: 5px;
    background-color: #505EFF;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    line-height: 65px;
    margin-left: 20px;
}

JavaScript

// 調整評論高度
let textareaHeight = document.querySelector('#textareaHeight')
let textarea = document.querySelector('#textarea')
textarea.addEventListener('input', function (e) {
    textareaHeight.style.height = '25px'
    if (e.target.scrollHeight > 25) {
        textareaHeight.style.height = '52px'
    } else {
        textareaHeight.style.height = '25px'
    }
})

 以上就是 直播帶貨原始碼，評論框自動控制高度，更多內容歡迎關注之後的文章