JS:文本框失去焦点事件、获得焦点事件

文本框失去焦点事件、获得焦点事件

onBlur:当失去输入焦点后产生该事件

onFocus:当输入获得焦点后,产生该文件

Onchange:当文字值改变时,产生该事件

Onselect:当文字加亮后,产生该文件

 

点击时文字消失,失去焦点时文字再出现

使文本框获得焦点,并改单击文本框后,改变背景颜色代码:
CSS样式:
fileldset{
width:350px;
}

.textInput,textarea{
width:200px;
font-family:arial;
background-color:#ffffff;
border:1px solid #000;
}

.inputHiglighted{
width:200px;
background-color:#FFCE31;
color:#000;
border:1px solid #000;
}

JS语句:
var currentlyActiveInputRef=false;
var currentlyActiveInputClassName=false;

function higlightActiveInput(){
if(currentlyActiveInputRef)
{
currentlyActiveInputRef.className=currentlyActiveInputClassName;
}
currentlyActiveInputClassName=this.className;
this.className='inputHighlighted';
currentlyActiveInputRef=this;
}

function initInputHighlightScript(){
var tags=['input','textarea'];
for(tagCounter=0;tagCounter var inputs=document.getElementsByTagName(tags[tagCounter]);
for(var no=0;no {
if(inputs[no].className && inputs[no].className=='doNotHighlightThisInput') continue;
if(inputs[no].tagName.toLowerCase()=='textarea'||(inputs[no].tagName.toLowerCase()=='input' && inputs[no].type.toLowerCase()=='text'))
{
inputs[no].οnfοcus=highlightActiveInput;
inputs[no].οnblur=blurActiveInput;
}
}
}
}



Highlight active input



















此脚本放在网页的底部

你可能感兴趣的:(js)