网站首页 » 前端开发 » div+css » 信微信聊天窗口输入框实现方案
上一篇:
下一篇:

信微信聊天窗口输入框实现方案

微信相信你不陌生了,即使你天天用并且你也从事前端工作,但如果你没有遇到过这样的需求,你是不会留意到微信聊天窗口底部的那个输入框里的用户体验优化细节。如果我说对了,那么你可以先打开微信,然后输入很多很多内容,看看那个输入框会怎么变化。

如果你觉得这很麻烦,好,我用文字直播。当你输入的内容超过一行时,输入框的高度会自己适应你的内容以容下两行内容,但当你输入的文字达到一定的行数时,这个输入框的高度就固定了,不会再变高。这样处理是为了有更好的用户体验,第一首先,当你输入很多内容时,如果当前输入框只为你显示一行,其它的通过萝卜一般粗的手指来滚动查看,真是身心疲惫,所以才有了输入框高度会随着内容高度变化而变化,但这样又会出现另一个问题,在这么小的手机屏幕上如果无限制的一直变高,那又是一件多么得不尝失的事。因为不排有人在输入框里直接给你放几百字进去,此时你能不能看到屏幕都成了问题。所以就在两者中作个平衡。一开始随着内容高度变化面变化,当到达一定高度后就不再增高,而是可以滚动输入框里的内容来查看其它内容。

CSS 样式

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: "微软雅黑"
}

.mr10 {
    margin-right: 10px;
}

.yk-cell {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
}

.yk-cell-bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.yk-box {
    padding: 10px 15px
}


.chat-room {
    overflow-y: scroll;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.robot-wrap .chat-room {
    padding: 10px 15px 15px;
}

.chat-item {
    margin-bottom: 24px;
}

.chat-head-icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    text-align: center;
    align-self: flex-start;
    box-shadow: inset 0 0 12px #ccc;
    border-radius: 50%;
}

.chat-head-icon img {
    width: 40px;
    display: block;
}

.chat-room .chat-content-main {
    position: relative;
    padding: 10px;
    border-radius: 4px;
    margin-top: 12px;
    word-break: break-all;
}

.chat-room .robot .chat-content-main {
    border: 1px solid #ddd;
    background: #fff;
}

.chat-room .robot .chat-head-icon {
    margin-right: 12px;
    /*background-image: url(./1.png);*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #333;
}

.chat-room .myself .chat-head-icon {
    margin-left: 12px;
    /*background-image: url(./2.png);*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #E6454A;
}

.chat-room .myself .chat-content-main {
    color: #E6454A;
    border: 1px solid #E6454A;
}

.chat-room .robot .chat-content-wrap {
    padding-right: 68px;
}

.chat-room .myself .chat-content-wrap {
    flex-direction: row-reverse;
    padding-left: 38px;
}

.chat-room .chat-content-main:before,
.chat-room .chat-content-main:after {
    content: "";
    position: absolute;
    top: 8px;
    display: block;
    width: 0;
    height: 0;
    border-width: 8px 8px 0px 8px;
    border-style: solid;
}

.chat-room .robot .chat-content-main:before {
    left: -9px;
    border-color: #ddd transparent transparent transparent;
}

.chat-room .robot .chat-content-main:after {
    top: 9px;
    left: -7px;
    border-color: #fff transparent transparent transparent;
}

.chat-room .myself .chat-content-main:before {
    right: -9px;
    border-color: #E6454A transparent transparent transparent;
}

.chat-room .myself .chat-content-main:after {
    top: 9px;
    right: -7px;
    border-color: #fff transparent transparent transparent;
}
/*关键样式*/
.robot-room-wirte {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    background: #eee;
    box-sizing: border-box;
    border-top: 1px solid #dedede;
}

.robot-room-wirte .input-text {
    display: block;
    border: none;
    outline: none;
    width: 100%;
    border: 1px solid #ddd;
    box-shadow: inset 0 0 9px #ddd;
    border-radius: 3px;
    resize: none;
    background: #fff;
    word-break: break-all;
    max-height: 90px;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 4px 5px;
    line-height: 21px;
    font-size: 14px;
}

.robot-room-wirte .input-text::-webkit-scrollbar {
    /*width: 0;*/
    /*opacity: 0;*/
    display: none;
}

.robot-room-wirte .send-btn {
    width: 38px;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    background: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    color: #454545;
    display: block;
    font-size: 14px;
    min-width: 50px;
    max-width: 50px;
    background: #fff;
    border: 1px solid #ddd;
    box-sizing: border-box;
    outline: none;
    align-self: flex-end
}

.robot-room-wirte .send-btn:active {
    opacity: 0.6;
}
/*关键样式 END*/

.robot-room-wirte .input-text::-webkit-scrollbar 中的三个属性可以选择其中一个来隐藏输入框的滚动条。

HTML 代码

<div class="robot-wrap">
    <div class="chat-room">
        <div class="chat-item myself">
            <div class="chat-content-wrap yk-cell">
                <div class="chat-head-icon">
                    熊
                    <!--<img style="width: 40px" style="height: 40px" src="2.png" alt="">-->
                </div>
                <div class="chat-content-main fs14">
                    我是朝夕熊!
                </div>

            </div>
        </div>

        <div class="chat-item robot">
            <div class="chat-content-wrap yk-cell">
                <div class="chat-head-icon">
                    云
                    <!--<img style="width: 40px" style="height: 40px" src="1.png" alt="">-->
                </div>
                <div class="chat-content-main fs12">
                    我是云库前端!
                </div>

            </div>
        </div>
        <div class="chat-item myself">
            <div class="chat-content-wrap yk-cell">
                <div class="chat-head-icon">
                    熊
                    <!--<img style="width: 40px" style="height: 40px" src="2.png" alt="">-->
                </div>
                <div class="chat-content-main fs14">
                    你家地址是多少!
                </div>

            </div>
        </div>

        <div class="chat-item robot">
            <div class="chat-content-wrap yk-cell">
                <div class="chat-head-icon">
                    云
                    <!--<img style="width: 40px" style="height: 40px" src="1.png" alt="">-->
                </div>
                <div class="chat-content-main fs12">
                    http://yunkus.com
                </div>

            </div>
        </div>
        <div class="chat-item robot">
            <div class="chat-content-wrap yk-cell">
                <div class="chat-head-icon">
                    云
                    <!--<img style="width: 40px" style="height: 40px" src="1.png" alt="">-->
                </div>
                <div class="chat-content-main fs12">
                    那你家呢?
                </div>

            </div>
        </div>
        <div class="chat-item myself">
            <div class="chat-content-wrap yk-cell">
                <div class="chat-head-icon">
                    熊
                    <!--<img style="width: 40px" style="height: 40px" src="2.png" alt="">-->
                </div>
                <div class="chat-content-main fs14">
                    http://zhaoxixiong.com
                </div>
            </div>
        </div>
    </div>
    <!--关键 HTML-->
    <div class="robot-room-wirte yk-box yk-cell">
        <div class="yk-cell-bd mr10">
            <div id="inputArea" contenteditable="true" class="input-text"></div>
        </div>
        <button class="send-btn" ng-click="send()" ng-disabled="">发送</button>
    </div>
    <!--关键 HTML END-->
</div>

不要看代码这么多,基本都是来陪衬的,关键代码就那么几行。

在线 DEMO:http://yunkus.com/demo/wechat-input-box-solution/。这个只是一个静态的聊天窗口,不可发送消息,只供在输入框中输入很多文字时测试。

在这个DEMO 中我们的输入框并没有用传统的 input 或者 textarea 元素,因为它们使用起来没有 div 元素灵活。而如果想要 div 元素也能像input 或者 textarea 元素那样可以输入内容的话,我们需要给 div 添加一个属性:contenteditable=”true”,这个属性规定是否可编辑元素的内容,设置了这个属性后,你就可以像 input 或者 textarea 那样操作元素里的内容了。

温馨提示:切换到手机模式下查看效果更佳哦!

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/wechat-input-box-solution/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END