前面几篇讲了图片的选择和上传,这一篇来讲讲发朋友的发送按钮的状态
还是以微信的发送按钮为例子。
它的基本业务是这样子的:默认情况下发送按钮是绿色的但是表面有一层灰色,这种状态发送的内容不符合规格或者为空,不能发送。当按钮为绿色也就是没有表面的灰色时内容就能发送了。
当文本框有内容且内容符合规则时发送按钮是绿色的,或者当有图片时按钮是灰色的,若以上两种情况都不符合要求,此时按钮是带灰色的绿色按钮。
1、绿色按钮表面带有一层灰色的效果:添加透明状态:opacity: 0.5。当它全完为绿色时,opacity为1。
2、先监控输入框,检测它是否输入了内容或者输入的内容是否合法:
<textarea placeholder="请输入内容(暂不支持图片格式的表情)" id="announceContent" onkeyup="validateBtn();"></textarea>
注意:这里使用onkeyup事件而不是onkeydown,
onkeydown是先检测已有的内容再将刚刚输入的内容添加到文本域中,拿到的是老的数据
onkeyup是将输入的内容添加到文本域中之后再检测,拿到的是新的数据
3、当输入内容时触发事件validateBtn(this):
/** *该方法用来检测保存按钮是否可以点击,若能点击就显示为亮色,否则为灰色,默认为灰色 * **/ function validateBtn(){ //1、先获取文字内容,若是有值,直接改成亮色 var announceContent = jQuery.trim($("#announceContent").val());//去除左右的空格 //alert(announceContent); var contentLen = announceContent.length; if(contentLen>0){//说明有输入内容 //过滤掉表情符号 announceContent = filteremoji(announceContent); var contentLen2 = announceContent.length;//重新获取长度 //若是两个长度不同,说明有需要清空的数据,那么重新赋值 if(contentLen!=contentLen2){ $("#announceContent").val(announceContent);//重新赋值 api.toast({ msg:'暂不支持图片格式的表情', duration: 2000,//默认为2000,即2s location: 'middle'//可选值:top、middle、bottom,默认为bottom }); if(contentLen2>0){//若是过滤之后还有数据,那么按钮就可以编辑了 $("#save_btn").css("opacity","1") return false; } } $("#save_btn").css("opacity","1") return false; } //2、说明没有输入公告内容,那么判断是否有上传图片 var picLen = $("#picList>a").length; if(picLen>0){//说明有上传图片,那么也可以点击了 $("#save_btn").css("opacity","1") return false; }else{ $("#save_btn").css("opacity","0.5") return false; } } function filteremoji(emojireg){ var ranges = [ '\ud83c[\udf00-\udfff]', '\ud83d[\udc00-\ude4f]', '\ud83d[\ude80-\udeff]' ]; emojireg = emojireg .replace(new RegExp(ranges.join('|'), 'g'), ''); return emojireg; }
注:有些输入法自带了表情包,在输入的时候可以输入且alert出来也可以正常显示,但是后台没法正确解析这些表情(会出现乱码) 所以这里不允许输入图片格式的表情。且当输入图片表情时validateBtn检测到是表情会自动过滤掉这些表情,界面看到的效果就是死活输入不进去。
4、图片上传时调用validateBtn方法:
当选择图片时需要调用,当删除图片时需要判断图片是否删除完要是删完了也要调用。