javascript特殊文本輸入框網(wǎng)頁(yè)特效
本文實(shí)例為大家分享了特殊js文本輸入框網(wǎng)頁(yè)特效,供大家參考,具體內(nèi)容如下
實(shí)例一:讓文本框只帶有下劃線
<script type="text/javascript"> function changeTextStyle(){ //讓文本框只帶有下劃線 //獲得文本框的DOM var myText = document.getElementById("myText"); myText.style.borderColor = 'black'; //設(shè)置邊框顏色 myText.style.borderStyle = 'solid'; //設(shè)置邊框樣式為實(shí)線 myText.style.borderWidth = '0 0 1px 0'; //設(shè)置邊框大小,0代表無(wú) } </script>
實(shí)例二:首字母或全部字母大寫(xiě)
<script type="text/javascript"> //格式校驗(yàn) function validateInput(){ //獲得文本框的DOM var myText1 = document.getElementById("myText1"); var myText2 = document.getElementById("myText2"); var val1 = myText1.value; //文本框1的值 var val2 = myText2.value; //文本框2的值 var errMsg = ''; //定義錯(cuò)誤提示字符 //判斷是否以大寫(xiě)字母開(kāi)頭 if(val1 != '' && (val1.charAt(0)>'Z' || val1.charAt(0)<'A')){ //拼接錯(cuò)誤字符 errMsg = '文本框1的首字母需要大寫(xiě)\n'; alert(errMsg); } if(val2 != '' && !/\b[A-Z]+\b/.test(val2)){ //拼接錯(cuò)誤字符 errMsg = '文本框2的需要全部為大寫(xiě)字母\n'; alert(errMsg); } } </script>
實(shí)例三:只能輸入數(shù)字的文本框
<script type="text/javascript"> //格式校驗(yàn) function validateInput(){ //獲得文本框的DOM var myText = document.getElementById("myText"); var val = myText.value; //獲取用戶輸入的值 if(!/\b[0-9]+\b/.test(val)){ //使用正則校驗(yàn) alert('只能輸入數(shù)字'); //提示錯(cuò)誤信息 } } </script>
實(shí)例四:用正則表達(dá)式驗(yàn)證Email格式
<script type="text/javascript"> //格式校驗(yàn) function validateInput(){ //獲得文本框的DOM var myText = document.getElementById("myText"); var email = myText.value; //獲得用戶輸入的Email //定義正則表達(dá)式 var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; if(emailReg.test(email)){ //判斷是否符合格式要求 alert("校驗(yàn)通過(guò),允許提交"); //通過(guò) }else{ alert("校驗(yàn)失敗,請(qǐng)檢查重新輸入"); //驗(yàn)證失敗 } } </script>
實(shí)例五:成為焦點(diǎn)時(shí)清除文本框內(nèi)容
<script type="text/javascript"> //清楚內(nèi)容 function clearContent(myText){ myText.value = ''; //把文本內(nèi)容的值設(shè)為空字符 } </script> <input type="text" value="" onfocus="clearContent(this)"/>
實(shí)例六:用戶輸入完以后立刻進(jìn)行格式校驗(yàn)
<script type="text/javascript"> function validateTel(){ //格式校驗(yàn) //獲得文本框的DOM var myTel = document.getElementById("myTel"); var val = myTel.value; //獲取用戶輸入的值 if(!/\b[0-9]+\b/.test(val)){ //使用正則校驗(yàn) alert('只能輸入數(shù)字'); //提示錯(cuò)誤信息 //修改樣式,引起注意 myTel.style.border = '1px solid red'; }else if(val.length != 11){ //長(zhǎng)度必須是11位 alert('手機(jī)號(hào)碼是11位'); //提示錯(cuò)誤信息 //修改樣式,引起注意 myTel.style.border = '1px solid red'; }else{ //修改樣式,表示通過(guò)了 myTel.style.border = '1px solid green'; return true; } } </script> <input type="text" value="" id="myTel" onblur="validateTel()"/>
實(shí)例七:輸入文字時(shí)文本框邊框閃爍
onfocus()和onblur()最好成對(duì)編寫(xiě)!
<script type="text/javascript"> //初始化函數(shù) function init(){ //獲取所有的文本DOM var texts = document.getElementsByTagName('input'); //遍歷所有的文本框 for(var i=0;i<texts.length;i++){ var t = texts[i];//當(dāng)前文本框 var timer; //監(jiān)聽(tīng)聚焦事件 t.onfocus = function(){ var e = this;//保留當(dāng)前DOM的引用 //開(kāi)始閃爍的定時(shí)器 timer = setInterval(function(){ //獲取當(dāng)前的邊框顏色變量 var c = e.style.borderColor; if(c == 'yellow'){//如果是黃色 e.style.borderColor = '';//恢復(fù)原色 }else{//否則,邊框變成黃色 e.style.borderColor = 'yellow'; } },1000);//每1秒閃爍一次 }; t.onblur = function(){//監(jiān)聽(tīng)離開(kāi)事件 //恢復(fù)邊框顏色 t.style.borderColor = ''; clearInterval(timer);//清除定時(shí)器 } } } </script> <body style="text-align:center;" onload="init();">
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- javascript實(shí)現(xiàn)自動(dòng)輸出文本(打字特效)
- js實(shí)現(xiàn)點(diǎn)擊文本框顯示日期選擇器特效代碼分享
- 隨日期每天自動(dòng)變換的文本的js特效
- Js+CSS實(shí)現(xiàn)的間斷和不間斷文本滾動(dòng)代碼
- js實(shí)現(xiàn)文本上下來(lái)回滾動(dòng)
- js實(shí)現(xiàn)單行文本向上滾動(dòng)效果實(shí)例代碼
- js 文本滾動(dòng)效果的實(shí)例代碼
- JS實(shí)用的帶停頓的逐行文本循環(huán)滾動(dòng)效果實(shí)例
- 純javascript實(shí)現(xiàn)四方向文本無(wú)縫滾動(dòng)效果
- JavaScript文本特效實(shí)例小結(jié)【3個(gè)示例】
相關(guān)文章
JS promise解決異步問(wèn)題過(guò)程詳解
Promise是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。簡(jiǎn)單說(shuō)就是一個(gè)容器,里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件(通常是一個(gè)異步操作)的結(jié)果。從語(yǔ)法上說(shuō),Promise是一個(gè)對(duì)象,從它可以獲取異步操作的消息2023-04-04全網(wǎng)小程序接口請(qǐng)求封裝實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于全網(wǎng)小程序接口請(qǐng)求封裝的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11基于javascript實(shí)現(xiàn)按圓形排列DIV元素(一)
本篇文章主要介紹基于javascript實(shí)現(xiàn)按圓形排列DIV元素的方法,此文著重于介紹對(duì)實(shí)現(xiàn)的按圓形排列DIV元素的分析,需要的朋友來(lái)看下吧2016-12-12bootstrap中使用google prettify讓代碼高亮的方法
使用google prettify 讓代碼高亮非常漂亮,接下來(lái)通過(guò)本文給大家介紹bootstrap中使用google prettify讓代碼高亮的方法,感興趣的朋友一起看看吧2016-10-10Javascript中setTimeOut和setInterval的定時(shí)器用法
這篇文章主要介紹了Javascript中setTimeOut和setInterval的定時(shí)器用法的相關(guān)資料,需要的朋友可以參考下2015-06-06js實(shí)現(xiàn)對(duì)table的增加行和刪除行的操作方法
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)對(duì)table的增加行和刪除行的操作方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10