`

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

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

分享到:
评论

相关推荐

    APICloud通用命令行开发工具apicloud-cli.zip

    APICloud 提供的一款适用于终端/命令行的 APICloud 平台开发工具,基于 apicloud-tools-core 核心开发库 开发,包含新建页面模板,新建应用模板,WiFi同步等核心功能等核心库已有功能。操作系统: Mac/Windows/...

    APICloud教程:服务器上的页面执行API

    通过本文介绍的方法,开发者可以在APICloud框架下轻松地实现服务器页面对客户端页面的操作,极大地提升了应用的灵活性和可扩展性。当然,在实际开发过程中还需要综合考虑安全性和性能等因素,以确保应用的质量和用户...

    ApiCloud下:视频播放模块SDK

    在APICloud平台上,开发者可以利用其提供的视频播放模块SDK来构建具有强大视频播放功能的应用程序。这个SDK专为Android Studio设计,便于在apicloud的自定义模块开发中使用。以下将详细介绍APICloud视频播放模块SDK...

    Atom的APICloud开发工具APICloud-For-Atom.zip

    基于 apicloud-tools-core 核心工具库开发;包含四个默认应用模板与26个默认页面模板;支持 WiFi 增量/全量 更新;基于事件机制的流式日志输出;代码基于 GPL-3.0 开源,可自由定制与扩展;支持在 Atom 控制台实时调试...

    使用APICloud从0开始写脉脉(四) 再谈顶部导航栏

    ### 使用APICloud从零开始构建“脉脉”应用(四):深入解析顶部导航栏设计与实现 #### 概述 本篇文章将继续探讨在使用APICloud进行移动应用开发时,如何从零开始构建一个类似“脉脉”的应用程序,并特别聚焦于...

    APICloud-polyfill脚手架

    APICloud-polyfill脚手架是为开发者提供的一种高效、便捷的开发工具,它主要针对APICloud平台,用于解决在不同浏览器或低版本环境下,API不兼容的问题。APICloud是一个移动应用开发平台,它允许开发者使用JavaScript...

    APICloud开发工具核心库APICloud-Tools-Core.zip

    开发者可基于此核心库,定制各种编辑器插件或者将 APICloud 的开发调试功能与已有的自动化业务流程结合,提升开发效率。特点轻量: 底层WiFi同步核心功能,使用 nodejs 重写,代码体积缩减到 2M 以下;开源: 基于 ...

    APICloud-CLI工具使用说明

    APICloud是一款强大的移动应用开发平台,它允许开发者使用JavaScript进行跨平台的原生应用开发。...阅读《APICloud-CLI工具使用说明.pdf》文档将更深入地了解每个命令的用法和参数,从而更好地掌握APICloud的开发流程。

    APICloud开发脚手架apicloud-polyfill.zip

    apicloud-polyfill,是 APICloud 为切实提高前端开发者的混发开发体验而推出的一个脚手架. 借助 apicloud-polyfill ,前端开发者可以直接使用最新的 es6,es7语法,在 JS 层以模块化的方式,高效优雅地开发 APICloud...

    ble-master.zip_apicloud_apicloud 蓝牙_ble-name_boxn89_扫描蓝牙

    蓝牙 , apicloud用于蓝牙扫描,包括Mac , name , uuid

    vaq-docs:项目文档vue-apicloud-quickstart

    【标题】"vaq-docs:项目文档vue-apicloud-quickstart" 是一个与Vue.js和APICloud相关的快速启动指南。这个项目旨在为开发者提供一个详细的文档集合,帮助他们快速理解和应用Vue.js与APICloud的集成,以便在移动应用...

    APICloud-App-Templates-master.zip

    同时,了解JavaScript基础和一定的前端开发经验也是必不可少的。通过实践这些模板,开发者可以逐步熟悉APICloud的工作流程,并提升他们的移动应用开发技能。 总的来说,"APICloud-App-Templates-master.zip"为...

    APICloud开发工具:WebStorm插件

    APICloud是一个强大的移动应用开发平台,它允许开发者使用JavaScript进行跨平台的原生应用开发。...对于想要在APICloud平台上快速开发高质量应用的开发者来说,安装并熟练使用这个插件是必不可少的步骤。

    APICloud IDE开发指南

    - **操作流程**:首先运行APICloud IDE,在IDE中点击特定功能按钮,即可进入向导页面。 ##### 2. 创建一个移动应用 - **说明**:在APICloud IDE中,可以同时为一个移动应用创建iOS和Android两个版本。操作步骤如下...

    vue-apiCloud-model-mobile-源码.rar

    在"vue-apiCloud-model-mobile-源码.rar"这个压缩包中,我们可以预见到与使用Vue.js开发移动应用相关的源代码。ApiCloud是一个提供云端一体化服务的平台,它允许开发者通过JavaScript API来构建原生的移动应用。结合...

    APICloud教程-如何提高移动性能

    ### APICloud教程:如何提高移动性能 #### 移动开发规范概述 为了提升移动应用的性能,开发者需要遵循一定的规范。以下规范是由Alloyteam团队根据实际开发经验总结提炼得出,具有很好的项目实践价值。 #### 字体...

    APICloud统计云API文档

    开发者需要在请求头部设置`X-APICloud-AppId`和`X-APICloud-AppKey`。接口接收两个参数:`startDate`(开始日期,格式为YYYY-MM-DD)和`endDate`(结束日期,同样格式)。成功响应会返回一个JSON对象,包含如设备...

    APICloud语法提示插件apicloud-autocomplete.zip

    Atom 插件: APICloud 语法提示与自动补全支持 Mac/Windows/Linux等主流操作系统是的,第一款同时支持三个主流操作系统的APICloud语法提示插件,现在可以在任意自己喜欢的系统上愉快地编码了!模块智能提示api.require ...

    grunt-init-apicloud:用于开发 apicloud 应用程序的 grunt-init 模板

    grunt-init-apicloud 基于grunt-init文档开发的一套模板 用于快速开发、部署APICloud应用 基本使用方法 下载模板 git clone https://github.com/taxusyew/grunt-init-apicloud.git ~/.grunt-init/apicloud windows上...

Global site tag (gtag.js) - Google Analytics