本文實例為大家分享了特殊js文本輸入框網頁特效，供大家參考，具體內容如下
實例一：讓文本框只帶有下劃線
<script type="text/javascript">
function changeTextStyle(){ //讓文本框只帶有下劃線
//獲得文本框的DOM
var myText = document.getElementById("myText");
myText.style.borderColor = 'black'; //設置邊框顏色
myText.style.borderStyle = 'solid'; //設置邊框樣式為實線
myText.style.borderWidth = '0 0 1px 0'; //設置邊框大小，0代表無
}
</script>
實例二：首字母或全部字母大寫
<script type="text/javascript">
//格式校驗
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 = ''; //定義錯誤提示字符
//判斷是否以大寫字母開頭
if(val1 != '' && (val1.charAt(0)>'Z' || val1.charAt(0)<'A')){
//拼接錯誤字符
errMsg = '文本框1的首字母需要大寫\n';
alert(errMsg);
}
if(val2 != '' && !/\b[A-Z]+\b/.test(val2)){
//拼接錯誤字符
errMsg = '文本框2的需要全部為大寫字母\n';
alert(errMsg);
}
}
</script>
實例三：只能輸入數字的文本框
<script type="text/javascript">
//格式校驗
function validateInput(){
//獲得文本框的DOM
var myText = document.getElementById("myText");
var val = myText.value; //獲取用戶輸入的值
if(!/\b[0-9]+\b/.test(val)){ //使用正則校驗
alert('只能輸入數字'); //提示錯誤信息
}
}
</script>
實例四：用正則表達式驗證Email格式
<script type="text/javascript">
//格式校驗
function validateInput(){
//獲得文本框的DOM
var myText = document.getElementById("myText");
var email = myText.value; //獲得用戶輸入的Email
//定義正則表達式
var emailReg
= /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
if(emailReg.test(email)){ //判斷是否符合格式要求
alert("校驗通過，允許提交"); //通過
}else{
alert("校驗失敗，請檢查重新輸入"); //驗證失敗
}
}
</script>
實例五：成為焦點時清除文本框內容
<script type="text/javascript">
//清楚內容
function clearContent(myText){
myText.value = ''; //把文本內容的值設為空字符
}
</script>
<input type="text" value="" onfocus="clearContent(this)"/>
實例六：用戶輸入完以後立刻進行格式校驗
<script type="text/javascript">
function validateTel(){ //格式校驗
//獲得文本框的DOM
var myTel = document.getElementById("myTel");
var val = myTel.value; //獲取用戶輸入的值
if(!/\b[0-9]+\b/.test(val)){ //使用正則校驗
alert('只能輸入數字'); //提示錯誤信息
//修改樣式，引起注意
myTel.style.border = '1px solid red';
}else if(val.length != 11){ //長度必須是11位
alert('手機號碼是11位'); //提示錯誤信息
//修改樣式，引起注意
myTel.style.border = '1px solid red';
}else{
//修改樣式，表示通過了
myTel.style.border = '1px solid green';
return true;
}
}
</script>
<input type="text" value="" id="myTel" onblur="validateTel()"/>
實例七：輸入文字時文本框邊框閃爍
onfocus()和onblur()最好成對編寫！
<script type="text/javascript">
//初始化函數
function init(){
//獲取所有的文本DOM
var texts = document.getElementsByTagName('input');
//遍歷所有的文本框
for(var i=0;i<texts.length;i++){
var t = texts[i];//當前文本框
var timer;
//監聽聚焦事件
t.onfocus = function(){
var e = this;//保留當前DOM的引用
//開始閃爍的定時器
timer = setInterval(function(){
//獲取當前的邊框顏色變量
var c = e.style.borderColor;
if(c == 'yellow'){//如果是黃色
e.style.borderColor = '';//恢復原色
}else{//否則，邊框變成黃色
e.style.borderColor = 'yellow';
}
},1000);//每1秒閃爍一次
};
t.onblur = function(){//監聽離開事件
//恢復邊框顏色
t.style.borderColor = '';
clearInterval(timer);//清除定時器
}
}
}
</script>
<body style="text-align:center;" onload="init();">
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。