移动端聊天(类似微信)——显示最新消息、输入框随内容自适应高度、模仿发送消息后清空输入框并恢复初始高度

ps:对应的html代码请参考我写的https://mp.csdn.net/postedit/87929498

 

一、显示最新消息即:页面一加载,或发送消息的时候,都能显示最新的消息,让滚动条保持在底部。

参考了:http://www.cnblogs.com/hnyei/archive/2011/09/20/2182199.html  但是他提供的方法中,我试了一下,只有scrollIntoView()对我有效。对scrollIntoView()方法更详细的解释可以参考http://www.cnblogs.com/cnhkzyy/p/9233314.html

(有一个没有实现:就是手机的虚拟键盘弹出来时,整个页面没有整体上移,导致输入框挡住了最新的消息,只能手动上划;只有在发送了新消息之后才会自动显示最新消息;查了一下没找到合适的方法,貌似都是安卓比较多,如果哪位大神有js就能解决的方法,欢迎留言讨论!)

二、输入框随内容自适应高度:类似于微信聊天输入框,随着内容增多换行,输入框会变高到一定高度后不再变化而是出现滚动条;发送消息后输入框又恢复了初始的高度。

三、发送消息:发送消息后清空输入框内容、历史消息显示最新发送的消息、输入框恢复初始高度;不能发送空消息(空格、换行)

 

js代码:

<script type="text/javascript">
    //滚动条保持在底部
    function sclloBottom(){
        msg_end.scrollIntoView();
    }
    //调整输入框高度
    //先要获取一次键盘的高度,不然会出现挤压的情况
    var firstHeight=$("#msg-content")[0].scrollHeight;
    $("#msg-content").height(firstHeight);
    $("#msg-content").on("keyup keydown", function(){
        if(this.scrollHeight<=79){
            $(this).height(this.scrollHeight);
        }else{
            $(this).height("79");
        }
    });
    //测试:点击发送插入消息
    $("#send-msg").on("click",function(){
            var text=$("#msg-content").val();
            if(text=="" || text.match(/^\s+$/g)){
                alert("消息不能为空");
            }else{
                var html='<div class="admin-group"><img class="admin-img" src="img/kh-02.png"/><div class="admin-msg"><i class="triangle-admin"></i><pre class="admin-reply">'+text+'</pre></div></div>';
                $('.mobile-page').append(html);
                $("#msg-content").val("").focus();//清空输入框并获取焦点
                sclloBottom();//保持滚动条在底部
                $("#msg-content").height(firstHeight);//恢复初始高度
            }
    });
    
</script>

 

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值