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实现边框闪烁提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。