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

[07-23 13:05:21]   来源：http://www.wenxue9.com  it数码   阅读：8246次

概要： 文本框失去焦点事件、获得焦点事件onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后，产生该文件Onchange:当文字值改变时，产生该事件Onselect:当文字加亮后，产生该文件<input type="text" value="a" >点击时文字消失，失去焦点时文字再出现使文本框获得焦点,并改单击文本框后,改变背景颜色代码: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 currentlyActiveInputClassNam

JS：文本框失去焦点事件、获得焦点事件,标签：i知识,数码常识,http://www.wenxue9.com
  

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

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

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

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

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

<input type="text" value="a" >点击时文字消失，失去焦点时文字再出现

使文本框获得焦点,并改单击文本框后,改变背景颜色代码:
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<tags.length;tagCounter++){
var inputs=document.getElementsByTagName(tags[tagCounter]);
for(var no=0;no<inputs.length;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].onfocus=highlightActiveInput;
inputs[no].onblur=blurActiveInput;
}
}
}
}

<script type="text/javascript" src="highlight-active-input.js"></script>

<form method="post" action="#">
<fieldset>
<legend>Highlight active input</legend>
<table>
<tr>
<td><label for="name">Name:</label></td>
<td><input class="textInput" type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="email>E-mail:</label></td>
<td><input class="textInput" type="text" name="email" id="email"></td>
</tr>
<tr>
<td><label for="comment">Comments:</label></td>
<td><textarea id="comment" name="comment" rows="3"></textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" onclick="return false" value="Submit">
</td>
</tr>
</table>
</fieldset>
</form>

此脚本放在网页的底部
<script type="text/javascript">
<!--
initInputHighlightScript();
//-->
</script>
 

上一篇：如何让网页内容自动换行不撑破容器