APICloud（五）：发送按钮的状态监测-可点击和不可点击

前面几篇讲了图片的选择和上传，这一篇来讲讲发朋友的发送按钮的状态

 

还是以微信的发送按钮为例子。

它的基本业务是这样子的：默认情况下发送按钮是绿色的但是表面有一层灰色，这种状态发送的内容不符合规格或者为空，不能发送。当按钮为绿色也就是没有表面的灰色时内容就能发送了。

当文本框有内容且内容符合规则时发送按钮是绿色的，或者当有图片时按钮是灰色的，若以上两种情况都不符合要求，此时按钮是带灰色的绿色按钮。

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方法：

当选择图片时需要调用，当删除图片时需要判断图片是否删除完要是删完了也要调用。