jquery实现类似微信输入框的输入聊天框

最近在切一张聊天页面的时候需要实现一个类似于像微信一样的聊天输入框，即输入框的高度会随着内容的增加不断增高。

综合了一下网上的思路目前有依靠keyup来判断的，但是这种方法在遇到一次性输入大量文本的时候好像有点问题，而且在遇到删除文字时好像也有点问题。还有一种是依靠定时器来解决。当用户的焦点在输入框的时候隔一段时间就检查输入框里文本的实际高度，一旦实际高度大于输入框的高度，即把输入框的高度调成与文本的实际高度一致。我的代码就是采用了第二种。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>聊天框</title><script type="text/javascript" src="JS/jquery-3.4.1.min.js"></script><style>.div {position: fixed;width: 200px;height: auto;min-height: 60px;border: solid black 1px;background-color: #FFF;bottom: 100px;left: -40px;margin-left: 50%;}.div-textarea {position: absolute;width: 80%;height: auto;top: 10px;left: 10px;bottom: 10px;overflow-x: hidden;overflow-y: hidden;-webkit-user-select: text;word-wrap: break-word;word-break: break-all;}</style>
</head>
<body>
<div class="div"><textarea class="div-textarea"></textarea></div>
<script>$(function () {/*不断的保持高度相同*/function keepHeight() {var newHeight = $('.div-textarea')[0].scrollHeight;$('.div').height(newHeight);}/*定时器*/var liaotoan = setInterval(keepHeight, 1);/*鼠标焦点时开启定时器*/$('.div-textarea').on('click', function () {liaotoan = setInterval(keepHeight, 1);});/*关闭定时器*/$('.div-textarea').on('blur', function () {clearInterval(liaotoan);});});
</script>
</body>
</html>

jquery实现类似微信输入框的输入聊天框相关推荐

qq html制作,jquery学习练习：制作QQ简易聊天框
使用html( )获取和设置页面内容使用val( )获取聊天内容使用addClass( )为指定元素追加样式使用数组保存聊天人员头像和昵称使用随机函数获取聊天人员的头像和昵称在输入框中输入内 ...
swift实现ios类似微信输入框跟随键盘弹出的效果
为什么要做这个效果在聊天app,例如微信中,你会注意到一个效果,就是在你点击输入框时输入框会跟随键盘一起向上弹出,当你点击其他地方时,输入框又会跟随键盘一起向下收回,二者完全无缝连接,那么这是怎么实 ...
iOS - 自主实现类似微信语音视频信息聊天（idoubs详细使用方法）1.0
2017 年本命年到了一定要兢兢业业努力去让自己变得更好~ 先给大家拜个年啦. 这篇文章早在16年底就已经在pages上码了一遍因为总有事情就一直没有放上来. 好了话不多说今天主要不是讲 ...
WPF显示富文本emoji表情+文本（类似微信）
祝大家端午节安康! WPF开发者QQ群: 340500857 前言有小伙伴需要实现类似微信一样的气泡聊天emoji表情+文本. 欢迎转发.分享.点赞,谢谢大家~. 效果预览(更多效果请下载源码体 ...
原来微信“对方正在输入”在这种情况下才显示
点击上方"程序员大咖",选择"置顶公众号" 关键时刻,第一时间送达! 我们在微信聊天的时候总会看到 "对方正在输入--", 特别是和喜欢的人 ...
HTML聊天框特效,利用jQuery实现响应式聊天窗口界面特效
特效描述:利用jQuery实现响应式聊天窗口界面特效.利用jQuery实现响应式聊天窗口界面特效代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 10 Conversations ...
uniapp 移动端聊天框获取聊天历史记录
做一个类似淘宝客服聊天框的功能在这里插入代码片 <template><view class="content"><view class="c ...
php类似微信聊天框,仿微信聊天功能
摘要: 微信聊天 window.onload = () => { // 获取按钮 let btn = document.getElementById('btn'); // 获取输入框 let t ...
完美解决deepin-wine-wechat微信黑块以及聊天输入框中文字体显示为竖条的问题（亲测有效！）
一. 解决显示微信黑块的问题 1. 安装wmctrl sudo apt-get install wmctrl 2. 使用wmctrl命令查看系统正在运行的窗口打开微信聊天窗口后会有黑块显示,此时如下 ...

jquery实现类似微信输入框的输入聊天框

jquery实现类似微信输入框的输入聊天框相关推荐

最新文章

热门文章