Javascript结合CSS实现边框闪烁提示-三体教程
文章目录

Javascript结合CSS实现边框闪烁提示

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

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

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

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

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

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

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

html代码<style>
.selectshake{ border:1px solid #d00; background:#ffe9e8; color:#d00;}
</style>
<p>js边框闪烁</p>
<input type="text" id="keytxt" value="" placeholder="请输入内容" />
<input type="button" id="btn" value="提交" />
<script>
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('成功提交');
	}
});
</script>

亲自测试一下

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

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

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

本文网址:http://www.santii.com/article/26.html


数据更新时间:2018-05-21