html中如何让字段闪烁,Javascript结合CSS实现边框闪烁提示

Javascript结合CSS实现边框闪烁提示2017-09-01 23:12

当我们提交表单的时候，有些字段是必填的。

但是如果用户提交的时候偏偏不填写就提交，这时我们一般都会弹出一个框来提醒用户。

但是有些小伙伴并不喜欢使用弹窗，觉得用户体验不好。

今天就有小伙伴问小编，有没有方法实现边框闪烁，以此来提醒用户。

讲真，javascript、jquery感觉就是万能的，就像没有什么实现不了的一样。

所以这个问题是肯定的，方法肯定有。

今天小编就分享Javascript实现边框闪烁的实例。 html代码

.selectshake{ border:1px solid #d00; background:#ffe9e8; color:#d00;}

js边框闪烁

function shake(ele,cls,times){//边框闪烁

var i = 0,t= false ,o =ele.attr("class")+" ",c ="",times=times||2;

if(t) return;

t= setInterval(function(){

i++;

c = i%2 ? o+cls : o;

ele.attr("class",c);

if(i==2*times){

clearInterval(t);

ele.removeClass(cls);

}

},200);

};

$("#btn").click(function(){

if ($.trim($("#keytxt").val())==''){

$("#keytxt").attr("placeholder","请输入内容");

$("#keytxt").focus();

shake($("#keytxt"),"selectshake",4);

return false;

}else{

alert('成功提交');

}

});

以上代码的功能就是，当用户点击提交按钮的时候，如果文本框里面不输入信息，则无法提交。

而且使文本框闪烁，用显眼的方式来提醒用户，这个地方是必须填写的。

其中用到了placeholder属性，这个属性是提供可描述输入字段预期值的提示信息。相当于是做为可输入字段的默认值一样。

html中如何让字段闪烁,Javascript结合CSS实现边框闪烁提示相关推荐

WebPart(SharePoint)中如何使用自定义的Javascript和css样式
由于SharePoint WebPart 不像asp.net,可以拖拽控件,而且没有前台代码.你只能发布倒sharepoint上进行浏览.由于没有前台的HTML,只有后台的cs文件.所以不能通过通常的 ...
vue.js与ajax删除,javascript - VueJs和VueResource，从Ajax请求中删除标头字段 - 堆栈内存溢出...
当实例化Vuejs (2.2.6)和Vue-resource (1.2.1)时 ,我使用以下代码设置标头授权,通过这种方式,我可以将所有请求授权给我的API: Vue.http.headers.com ...
转在b/s开发中经常用到的javaScript技术
在b/s开发中经常用到的javaScript技术一.验证类 1.数字验证内 1.1 整数 1.2 大于0的整数 (用于传来的ID的验证) 1.3 负整数的验证 1.4 整数不能大于i ...
oracle遍历表做查询,oracle 语句之对数据库的表名就行模糊查询，对查询结果进行遍历，依次获取每个表名结果中的每个字段(存储过程)...
语句的执行环境是plsql的sql窗口, 语句的目的是从整个数据库中的所有表判断不等于某个字段的记录数 . 代码如下: declare s_sql clob:=''; -- 声明一个变量,该变量用于 ...
c语言int超出范围字符串,Go返回int64类型字段超出javascript Number范围的解决方法...
Go返回int64类型字段超出javascript Number范围的解决方法最近在项目中,一个go服务给前端提供了一个接口,返回json格式数据,其中Int64字段会超出javascript Nu ...
TP框架中field查询字段
TP框架中field查询字段不是fields 也不是files !!!! 不是fields 也不是files !!!! 不是fields 也不是files !!!! 不是fields 也不是file ...
如何获取数据库中标的所有字段和数据类型？
如何获取数据库中标的所有字段和数据类型? 目录如何获取数据库中标的所有字段和数据类型? #获取表中所有字段
CRM User Status profile中Business Transaction字段的用途
有朋友问到User Status profile中Business Transaction字段的用途,如下图INPR, FINI所示. 实际上,这个字段作为一个桥梁,连接了User Status和Sy ...
CRM User Status profile中Business Transaction字段的用途 1
有朋友问到User Status profile中Business Transaction字段的用途,如下图INPR, FINI所示. 实际上,这个字段作为一个桥梁,连接了User Status和Sy ...

html中如何让字段闪烁,Javascript结合CSS实现边框闪烁提示

html中如何让字段闪烁,Javascript结合CSS实现边框闪烁提示相关推荐

最新文章

热门文章