文本截取
来源：互联网 发布：网络摄像头安装步骤 编辑：程序博客网 时间：2024/05/24 04:59
在进入话题之前，我们先说一个场景。
类似于微博140字的限制和美团外卖app点餐备注只限50字。像这种需求我们该如何实现。 
分析需求：
1.既然有字数限制，我们在textarea框中输入的字数超出这个最大的字数时，我们该如何处理。
简而言之就是超出的字数，我们要截取掉。
并且要提示输入了多少字。
<textarea onChange={(e)=>this.changeEvent(e)}></textarea>上面注意要把e传进去。
当在输入框改变时，得到输入的值
changeEvent(e){ let value = this.state.value; this.setState({ remark: dealtextareaData(value) })}//处理多余的字数
dealtextareaData(){ if(value.length > 140){ return value.substring(0,500); } return value;}下面这个写的比较全，可以供参考
textareaOnChange(e){ let value = e.target.value; if(value.length > 140){ this.setState({ remark_tips: true, word_number: 140 }) }else{ this.setState({ remark_tips: false, word_number: value.length }) } this.setState({ remark: this.dealInputData(value), remarkBorder: false }); }整个代码
export default class joinUs extends Component{ constructor(props){ super(props); this.state = { //填写的信息 username: '', userphone: '', usermail: '', remark: '', provinceName: '', cityName:'', //模态框 isShowMoadl: false, isShowCatchModal: false, isShowSuccessModal: false, //输入错误的提示 name_tips: false, phone_tips: false, mail_tips: false, remark_tips: false, province_city_tips: false, //为空的提示 name_tips_empty: false, phone_tips_empty: false, mail_tips_empty : false, province_city_tips_empty: false, //模态框遮罩 isShade: false, city_show: false, city_value: '', //计数 word_number: 0, //给输入框加border nameBorder: false, phoneBorder: false, cityBorder: false, mailBorder: false, remarkBorder: false } } //点击提交 submitEvent(){ console.log(this.state); var value = this.state.username && this.state.userphone && this.state.provinceName && this.state.cityName && (!this.state.name_tips) && (!this.state.phone_tips) && (!this.state.mail_tips) &&(!this.state.remark_tips) && (!this.state.province_city_tips); if(value){ this.submitData(); }else{ this.setState({ isShowMoadl: true, isShade: true, // name_tips: true, // phone_tips: true, // province_city_tips: true, }) } } //请求数据 submitData(){ let url = "/api/franchisee/join"; let param ={ 'franchiseeName':this.state.username, 'cellPhone':this.state.userphone, 'provinceName':this.state.provinceName, 'cityName':this.state.cityName, 'emailAddress': this.state.usermail, 'remark': this.state.remark } const request = new Request(url, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify(param) }) return fetch(request).then(res=>{ return res.json() }).then(data=>{ console.log('submitData',data); //数据请求过来了证明已经提交信息成功，所以展示成功弹出框 if(data.result === 0){ this.setState({ isShowSuccessModal: true, isShade: true }) } }).catch(err=> { //console.log(err); this.setState({ isShowCatchModal: true, isShade: true }) }) } //如何校验姓名 checkNameEvent(e){ //console.log('失去焦点'); this.setState({ username: e.target.value, nameBorder: false },()=>{ var reg = /^[a-zA-Z0-9\u4e00-\u9fa5]{1,10}$/; if(!(reg.test(this.state.username))){ //console.log('请输入正确的用户名'); this.setState({ name_tips: true }) }else{ this.setState({ name_tips: false }) } }) } //用户名点击事件，点击用户名时，显示高亮效果。 nameFocusEvent(){ this.setState({ nameBorder: true }) } //校验电话号码 checkPhoneEvent(e){ //console.log('aa'); this.setState({ userphone: e.target.value, phoneBorder: false },()=>{ var reg = /^1[34578]\d{9}$/; //console.log(this.state.userphone); if(!(reg.test(this.state.userphone))){ console.log('请输入正确的手机号码'); this.setState({ phone_tips: true }) }else{ this.setState({ phone_tips: false }) } }) } //点击手机输入框，显示高亮效果 phoneFocusEvent() { this.setState({ phoneBorder: true }) } //校验城市 selectEvent(value1,value2){ this.setState({ provinceName: value1, cityName: value2 },()=>{ if(value1&&value2){ //console.log('没有选城市'); this.setState({ province_city_tips: false }) }else{ this.setState({ province_city_tips: true }) } }); } onchangeEvent(){ //console.log('ww'); if(this.state.city_value = ''){ this.setState({ province_city_tips: true }) }else{ this.setState({ province_city_tips: false }) } } onCancelEvent(){ this.setState({ city_show: false }) if( this.state.city_value == ''){ this.setState({ province_city_tips: true }) }else{ this.setState({ province_city_tips: false }) } } //校验邮件 checkMailEvent(e){ this.setState({ usermail: e.target.value, mailBorder: false },()=>{ if(this.state.usermail){ var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; //console.log(this.state.usermail); if(!(reg.test(this.state.usermail))){ this.setState({ mail_tips: true }) }else{ this.setState({ mail_tips: false }) } }else{ console.log('邮箱选填'); this.setState({ mail_tips: false }) } }) } //点击邮箱输入框时，显示高亮效果 mailFocusEvent() { this.setState({ mailBorder: true }) } //校验textarea框中的内容 checkRemark(e){ //console.log('checkRemark'); this.setState({ remark: e.target.value, remarkBorder: false }) } //点击备注输入框时，显示高亮效果 remarkFocusEvent() { this.setState({ remarkBorder: true }) } //备注框改变时 dealInputData(value){ if(value.length > 140){ return value.substring(0,140); } return value; } textareaOnChange(e){ let value = e.target.value; if(value.length > 140){ this.setState({ remark_tips: true, word_number: 140 }) }else{ this.setState({ remark_tips: false, word_number: value.length }) } this.setState({ remark: this.dealInputData(value), remarkBorder: false }); } //关闭成功的模态框时，所有的信息都清空 closeSuccessHandle(){ this.setState({ isShowSuccessModal: false, isShade: false, username: '', userphone: '', usermail: '', remark: '', provinceName: '', cityName:'', city_value: '' }) } /*关闭异常时模态框*/ closeCatchHandle(){ this.setState({ isShowCatchModal: false, isShade: false }) } //关闭失败模态框 closeHandle(){ this.setState({ isShowMoadl: false, isShade: false, }) } //成功时的模态框 successModal(){ return ( <div className="join-modal"> <div className="join-modal-content center"> <img src={ closeImg } alt="" className="join-cancel-img" onClick={this.closeSuccessHandle.bind(this)}/> <img className="failImg" src={ successImg } alt="" /> <div className="submit_success">申请提交成功!</div> <div className="describe join-message"> <p className="center">工作人员将第一时间回访，</p> <p className="center">请您耐心等待！</p> </div> </div> </div> ) } // 失败时的模态框 failModal(){ return ( <div className="join-modal"> <div className="join-modal-content center"> <img src={ closeImg } alt="" className="join-cancel-img" onClick={this.closeHandle.bind(this)}/> <img className="failImg" src={ failImg } alt="" /> <div className="join-message-tips"> <div className="message_font center">您填写的信息不完整，请</div> <div className="message_font center">修改后重新提交</div> </div> </div> </div> ) } //提交时网络异常或着其他情况的modal catchModal(){ return ( <div className="join-modal"> <div className="join-modal-content center"> <img src={ closeImg } alt="" className="join-cancel-img" onClick={this.closeCatchHandle.bind(this)}/> <img className="failImg" src={ failImg } alt="" /> <div className="join-message-tips"> <p className="center message_font">当前网络或者服务器异常</p> </div> </div> </div> ) } onchange(text){ let text1 = text; text1 = text1.split(" "); this.setState({city_value:text,provinceName: text1[0], cityName: text1[1],city_show:false}); if(this.state.city_value){ this.setState({ province_city_tips: false }) }else{ province_city_tips: true } } clickEvent(){ this.setState({city_show: true}); } nameChange(e){ this.setState({username:e.target.value}) } phoneChange(e){ this.setState({userphone:e.target.value}) } emailChange(e){ this.setState({usermail:e.target.value}) } render(){ return ( <div className="joinus_container"> <div className="joinus center"> <i></i> <img src={ starImg } alt="" /> <span className="partner center">诚招星糖合伙人</span> <img src={ starImg } alt="" /> <i></i> </div> <p className="join-title center">加入星糖，即刻启程</p> <div className="wrap-joinus"> <div className="join_username" style={{ border: this.state.nameBorder?'1px solid orange':'1px solid #ccc'}}> <label>姓名<span className="join_must">*</span>：</label> <input onBlur={ this.checkNameEvent.bind(this)} onFocus = { this.nameFocusEvent.bind(this) } value={this.state.username} onChange={this.nameChange.bind(this)} /> </div> <div> { this.state.name_tips ? <Text tips="请填写姓名（10个字以内）" />:'' } </div> <div> { this.state.name_tips_empty ? <Text tips="请填写姓名" />:'' } </div> <div className="join_username" style={{ border: this.state.phoneBorder?'1px solid orange':'1px solid #ccc'}}> <label>手机<span className="join_must">*</span>：</label> <input onBlur={ this.checkPhoneEvent.bind(this)} onFocus = { this.phoneFocusEvent.bind(this) } value={this.state.userphone} onChange={this.phoneChange.bind(this)} /> </div> <div> { this.state.phone_tips ? <Text tips="请填写正确的手机号码" />:'' } </div> <div> { this.state.phone_tips_empty ? <Text tips="电话号码不能为空" />:'' } </div> <div className="join_username" onClick={()=>this.clickEvent()}> <label className="city_label">城市<span className="join_must">*</span>：</label> <span className="join-cityname">{this.state.city_value}</span> <CityPicker data={cnCity} onCancel={ this.onCancelEvent.bind(this)} onChange={text=>this.onchange(text)} show={this.state.city_show} /> </div> <div> { this.state.province_city_tips ? <Text tips="省、市不能为空" />:'' } </div> <div> { this.state.province_city_tips_empty ? <Text tips="省和市不能为空" />:'' } </div> <div className="join_username" style={{ border: this.state.mailBorder?'1px solid orange':'1px solid #ccc'}}> <label>邮箱<span className="mail_star">*</span>：</label> <input type="text" onFocus = { this.mailFocusEvent.bind(this) } onBlur={ this.checkMailEvent.bind(this)} value={this.state.usermail } onChange={this.emailChange.bind(this)}/> </div> <div> { this.state.mail_tips ? <Text tips="请填写正确的邮箱" /> :'' } </div> <div className="join_textarea" style={{ border: this.state.remarkBorder?'1px solid orange':'1px solid #ccc'}}> <label>备注<span className="mail_star">*</span>:</label> <textarea className = "remark_fontSize" value={ this.state.remark } onChange={(e) => this.textareaOnChange(e)} onFocus = { this.remarkFocusEvent.bind(this) } onBlur={ this.checkRemark.bind(this)} ></textarea> <div className="word_tips"> <p className="word_number">{ this.state.word_number }</p> <p className="word_total">/140</p> </div> </div> <div> { this.state.remark_tips ? <Text tips="限制140字" /> :'' } </div> <div className="joinus-btn" onClick={this.submitEvent.bind(this)}> 提交 </div> </div> <div className="joinus-tel center"> 加盟电话：400-7008-963 转3 </div> { this.state.isShade ? <div className="shade"></div>: null } { this.state.isShowSuccessModal ? this.successModal() : null } { this.state.isShowMoadl ? this.failModal() : null } { this.state.isShowCatchModal ? this.catchModal() : null } </div> ) }}阅读全文
0 0
- 文本截取
- 截取日志文本行
- jquery 截取td文本
- sed 截取文本段
- 关于中文文本的截取
- JAVA截取文本特定字符串
- thinkphp 富文本截取字符串
- 【Linux】文本处理、关键字截取
- xml截取标签.取出文本(转)
- HTML超出文本多行截取代码
- HTML超出文本多行截取代码
- dedecms截取富文本的content
- java 文本内容中 截取 方法
- javascript substring截取之收缩文本demo
- shell文本处理之截取需求列
- 自定义处理函数,文本处理，汉字截取
- File文件创建路径，修改文本内容，截取文本内容
- File文件创建路径，修改文本内容，截取文本内容
- Solr的安装使用
- js内存泄漏常见的四种情况
- C++11多线程的原子操作
- 淘宝 sign值 加密
- SpringMVC启动过程详解--转载
- 文本截取
- 沙子的质量（石子合并）
- 子类继承父类
- 线程Thread类的start()和run()
- TFTP相关指令内容
- [NOIP2017模拟]豆豆游戏
- 镜头
- 进制转换
- fragment视图缓存
