textarea的文字显示

最新推荐文章于 2024-05-29 15:56:08 发布

yuanliy

最新推荐文章于 2024-05-29 15:56:08 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/a432qbc/article/details/124351545

jquery 专栏收录该内容

8 篇文章

订阅专栏

该博客主要探讨了如何利用HTML、CSS和JavaScript技术来实现textarea中文字的显示效果。首先介绍了HTML中textarea的基本用法，接着讨论了CSS如何美化textarea并控制文字样式，最后讲解了JavaScript如何动态地更新textarea的内容和视觉反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

html

			<div class="message-ly">
				<div class="message-ly-mask"></div>
				<div class="say-box" data-slide-in="at 3000 from zoomIn use linear during 2000">
					<i class="message-ly-close"></i>
					<div class="message-ly-header">
						<span class="message-ly-close">取消</span>
						<span class="message-ly-tit">我的留言</span>
						<button id="save" type="button">发出</button>
					</div>
					<div class="textarea" currentlength="0" maxlength="80">
						<textarea name="liuyan" placeholder="回首山大的生活，你是否有话想说？" maxlength="80"></textarea>
					</div>
				</div>
			</div>

css

.message-ly {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 7;
    width: 100%;
    height: 100%;
    display: none;
}
.message-ly-mask {
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}
.say-box {
    width: 100%;
    height: 55%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 8;
    background-color: #fff;
}
.say-box::before {
    content: '';
    width: 0.28rem;
    height: 0.28rem;
    display: inline-block;
    position: absolute;
    left: 0.2rem;
    top: 0.5rem;
    z-index: 1;
}
.message-ly-close {
    font-size: 0.32rem;
    color: #3787FF;
    z-index: 9;
    display: inline-block;
    width: 25%;
    margin-left: 0.5rem;
}
.message-ly-header {
    line-height: 50px;
}
.message-ly-close {
    font-size: 0.32rem;
    color: #3787FF;
    z-index: 9;
    display: inline-block;
    width: 25%;
    margin-left: 0.5rem;
}
.message-ly-tit {
    font-size: 0.5rem;
    color: #000;
    display: inline-block;
    width: 35%;
    text-align: center;
}
#save {
    width: 1.3rem;
    height: 0.56rem;
    background: linear-gradient(90deg,rgba(251,141,11,1),rgba(255,193,39,1));
    border-radius: 0.28rem;
    border: none;
    outline: none;
    color: #fff;
    float: right;
    margin-right: 0.3rem;
    margin-top: 0.15rem;
}
.textarea {
    position: relative;
    /* width: calc(100% - 0.64rem); */
    height: calc(100% - 2.2rem);
    padding-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}
.textarea textarea, .textarea textarea:focus {
    border: 0;
    padding: 0.3rem 0.3rem 0.3rem 0.5rem;
}
textarea {
    border: none;
    outline: none;
    line-height: 2;
    margin: 0 auto;
    width: calc(100% - 0.8rem);
    height: calc(100% - 0.8rem);
    font-size: inherit;
    resize: none;
    padding: 0.3rem;
    color: #686868;
}
.textarea::after {
    content: attr(currentlength) " / "attr(maxlength);
    position: absolute;
    right: 10px;
    bottom: 5px;
    font-size: 12px;
    color: #aaa;
}

js

        $('.message-ly').fadeIn();
            //留言关闭
	    $('.message-ly-close').click(function() {
	        $('.message-ly').fadeOut();
	    });
	        //留言保存
    $('#save').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        var liuyan = $('textarea').val().trim();
        if (liuyan == '') {
            tooltipClear('你还没有留言呢');
            return;
        }
        $.ajax({
            url: urls.save_message,
            data: {
                xh: xh,
                content: liuyan
            },
            dataType: 'json',
            type: 'post',
            timeout: 10000,
            success: function(data) {
                tooltipClear('留言已成功，待审核');
                $('.message-ly').fadeOut();
                $('textarea').val('');
            },
            error: function(xhr, type, errorThrown) {
                tooltipClear('请求服务失败');
            }
        });
    });
     //留言
    //实时计算textarea长度
    $('textarea').on('input propertychange', function() {
        var _len = $(this).val().length;
        $(this).parent().attr('currentlength', _len);
    });
    $('textarea').focus(function() {
        $(this).parent().css('borderColor', 'rgba(188,66,66,0.8)');
    }).blur(function() {
        $(this).parent().css('borderColor', '#ffffff');
    });