react实现仿微信聊天输入框

实现原理：
- 利用H5提供的元素可编辑属性 contentEditable 使普通的html元素具有和输入框一样的编辑功能
其他实现方式（较复杂）：
- 使用textarea作为输入框
- 准备一个与textarea等宽的pre元素，用于计算内容高度，需要设置css {word-break:break-all} 否则可能不会自动换行
- 输入的同时将value写入pre，然后获取pre的scrollHeight，将其赋给textare的height，以此实现textarea随内容自动调整大小
- emoji输入：由于无法在textarea内直接渲染图片，普遍的做法是使用[^-]这种格式的字符代替emoji，在使用富文本时通过正则匹配[^-]，替换成对应的emoji图片进行渲染
缺陷
- 需要直接操作dom，不符合MV*主义核心价值观
- 依赖h5新属性
使用场景
- 即时通讯
- 留言、评论
git仓库地址：https://github.com/DarthVaderrr/richTextInput.git

打开方式

$ git clone https://github.com/DarthVaderrr/richTextInput.git
$ npm i 安装运行所需依赖
$ npm start 运行项目默认在3000端口

截图

主要代码

import React, { Component, Fragment } from 'react';
import { Icon } from 'antd';//使用了一个antd的icon，如果你的项目没有使用antd，可以自己写个按钮样式，无须引入
import { OutterContainer, InputOutter, BtnContainer, SendBtn, EmojiTab } from './style' //使用styled-compoents自定义的样式组件，这样做可以避免组件里出现过多css代码
export default class HyperTextInput extends Component {constructor(props) {super(props)this.state = {textareaH: '8vw',hyperText:"",showEmojiTab: false,emojiList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],}}render() {return (<Fragment><OutterContainer><InputOutter>{/*用可编辑的div代替textarea承担输入功能:*/}<div className='inputDiv'ref={(inputDiv) => { this.inputDiv = inputDiv }} contentEditable={true}style={{ height: 'auto' }}onKeyUp={this.divInput.bind(this)}/><BtnContainer><div style={{display:"flex",justifyContent:"space-around",alignItems:"center",width:"100%"}}><IcononClick={this.showEmojiTab.bind(this)}type="smile"style={{ color: this.state.showEmojiTab ? '#1890FF' : '#555', fontSize: "1.2em",outline:"none",display:"flex",justifyContent:"center",alignItems:"center" }}/>{this.state.hyperText?<SendBtn onClick={this.sendMsg.bind(this)}>发送</SendBtn>:<SendBtn style={{color:"#999",background:"#ddd"}}>发送</SendBtn>}</div></BtnContainer></InputOutter>{/*emoji表情选择栏，默认折叠，点击图标展开*/}<EmojiTab style={{height:this.state.showEmojiTab?"40vw":"0"}}>{this.state.emojiList.map((item, index) => <div key={index}><img alt="" data-index={index} onClick={this.chooseEmoji.bind(this,item)} src={`/emoji/emoji${item}.svg`} /></div>)}</EmojiTab></OutterContainer></Fragment>)}//控制表情栏展开折叠showEmojiTab() {this.setState({showEmojiTab: !this.state.showEmojiTab})}//选择表情chooseEmoji(index){this.inputDiv.innerHTML+=`<img src="/emoji/emoji${index}.svg" />`;this.divInput.call(this);}//文本框输入事件：divInput() {this.setState({hyperText:this.inputDiv.innerHTML})}//发送消息事件：sendMsg(){console.log('即将发送的msg内容:\n',this.state.hyperText)this.inputDiv.innerHTML='';this.setState({hyperText:'',showEmojiTab: false})}
}

react实现仿微信聊天输入框相关推荐

iOS仿微信聊天输入框、评论输入框
最近项目有需求,需要实现一个类似微信聊天输入框的组件,用在全平台的评论功能中.大概需求就是输入的文字占满一行时,自动折行并且增大输入框的高,输入框的高有默认的最大值.在此,记录一下遇到的问题. 1.项 ...
react仿微信聊天室|react即时聊天IM系统|react群聊
react+redux仿微信聊天IM实战|react仿微信界面|react多人群聊天室最近一直捣鼓react开发,就运用react开发了个仿微信聊天室reactChatRoom项目,基于react+ ...
flutter 微信聊天输入框
高仿微信聊天输入框,效果图如下(目前都是静态展示,服务还没开始开发): 大家如果观察仔细的话应该会发现,他输入框下面的高度刚好就是软键盘的高度:所以在这里就需要监听软键盘的高度.还要配置 res ...
native聊天界面 react_ReactNative仿微信聊天APP实战项目|RN输入框表情
本帖最后由 xiaoyan2015 于 2019-9-4 13:35 编辑今天给大家分享的是 RN 聊天室项目,基于 react-native+react-navigation+react-redu ...
基于Flutter的仿微信聊天应用
前言作为当下风头正劲的跨端框架,flutter成为原生开发者和前端开发者争相试水的领域,笔者将通过一个仿微信聊天的应用,展现flutter的开发流程和相关工具链,旨在熟悉flutter的开发生态 ...
h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器
之前做过一版h5微信聊天移动端,这段时间闲来无事就整理了下之前项目,又重新在原先的那版基础上升级了下,如是就有了现在的h5仿微信聊天高仿版,新增了微聊.通讯录.探索.我四个模块左右触摸滑屏切换,聊天 ...
native聊天界面 react_ReactNative 仿微信聊天 App 实例分享|RN 仿朋友圈
今天给大家分享的是 RN 聊天室项目,基于 react-native+react-navigation+react-redux+react-native-image-picker+rnPop 等技术实 ...
js模拟群聊天php,jquery仿微信聊天界面实例分享
本文主要为大家详细介绍了jquery仿微信聊天界面的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 首先看一下我们的效果图. 这个颜色可能搭配的有些不合适,但基本功能大 ...
h5聊天室案例|仿微信聊天界面|多人群聊
html5仿微信聊天室weChatRoom案例|多人群聊互动|仿微信聊天界面该项目是使用html5+css3+zepto+swiper+wcPop等技术开发的仿微信聊天室,捣鼓调试了很长时间,在手机 ...

react实现仿微信聊天输入框

react实现仿微信聊天输入框

打开方式

截图

主要代码

react实现仿微信聊天输入框相关推荐

最新文章

热门文章