zoukankan      html  css  js  c++  java
  • 较为完善的限定字数评论框效果

    较为完善的限定字数评论框效果,首先看看效果,如下图:

    测试目标:

    1.输入框随着输入文本字符数高度自适应;

    2.类似微博输入框,限定字数位140字(280字节),超出则不能再继续输入;

    好,带着这两个目标开始项目,基本是百度加自己研究,大神请绕道

    //计算字节数
    function bytes(str) {
        var len = 0;
        for (var i = 0; i < str.length; i++) {
            if (str.charCodeAt(i) > 127) {
                len++;
            };
            len++;
        };
        return len;
    };
    
    //根据pLen参数,截取字节数
    function autoAddEllipsis(pStr, pLen) {
    	var otext= pStr
    	var len1=0;
    	for (var i = 0; i < otext.length; i++) {
            if (otext.charCodeAt(i) > 127) {
                ++len1;
            };
            ++len1;
    		if(len1>=pLen){
    			return otext.substring(0,i+1);
    		};
        };
    
    };
    
    
    function textarea_h(){
    //评论框高度自适应 start
    	var text = document.getElementById("comments-show"); 
    	var shadow = document.getElementById("comments-hide");
    	var otop=$('.channel-nav').offset().top-46;
    	text.oninput = text.onpropertychange = onchange;
    	function onchange() {
    		shadow.value = text.value+'0000';
    		setHeight();
    		setTimeout(setHeight, 0);
    		function setHeight() { text.style.height = shadow.scrollHeight + "px"; }
    	};
    //评论框高度自适应 end
    
    	$("#comments-show").keyup(function() {
    		var qbyte = bytes($.trim($(this).val()));
    		var limit = 280 - qbyte;
    		console.log(limit)
    		if(limit<=0){
    		    limit=0;
    		};
    		if (limit % 2 == 0) {
    			$(".com-left b").html((limit / 2));
    		} else {
    			$(".com-left b").html(((limit + 1) / 2));
    		};
    		
    		if(qbyte>=280){
    			$(".com-left b").css('color','#f00');
    			$('#comments-show, #comments-hide').val(autoAddEllipsis($.trim($(this).val()),280));
    		}else{
    			$(".com-left b").css('color','#999');
    		}
    	});
    	$("#comments-show").focus(function(){
    	    $(document).scrollTop(otop);
    		$(this).css('border','1px solid #fca6b3');
    		$('.comments-btn-wrap').show();
    	});
    
    	$('.com-right .cancel').click(function(){
    		$("#comments-show,#comments-hide").val("").height('20px').css('border','1px solid #ccc');
    		$(".com-left b").html(140);
    		$('.comments-btn-wrap').hide();
    	});
    };
    if($('.comments').length>0){
    	textarea_h();
    };
    

      

     ok,至此,目标基本达到,前端菜鸟,js写的很烂,谅解。。。

  • 相关阅读:
    Maven关于web.xml中Servlet和Servlet映射的问题
    intellij idea的Maven项目运行报程序包找不到的错误
    修改Maven项目默认JDK版本
    刷题15. 3Sum
    刷题11. Container With Most Water
    刷题10. Regular Expression Matching
    刷题5. Longest Palindromic Substring
    刷题4. Median of Two Sorted Arrays
    刷题3. Longest Substring Without Repeating Characters
    刷题2. Add Two Numbers
  • 原文地址:https://www.cnblogs.com/cainiaoz/p/5508867.html
Copyright © 2011-2022 走看看