本实例演示如何在网页上实时显示用户在文本框中输入的文本。
向网页上添加两个文本框，如图1-15所示。
图1-15 设计完成的网页
“输入:”对应的文本框name属性为Source，“输出:”对应的文本框name属性为Dest。
为Source文本框的onfocusin事件添加的响应代码如下：
function Source_onfocusin()
{
intervalID=setInterval("copy()", 50);
}
这样只要Source得到用户输入的焦点，就会每隔50毫秒自动调用一次copy函数，copy函数的内容如下：
function copy()
{
Dest.value=Source.value;
}
copy函数的作用是设置Dest中的内容与Source中的内容一致。
如果用户输入的焦点离开Source，那么就会清除计时器，停止调用copy函数。为此需要添加Source的onfocusout事件响应代码：
function Source_onfocusout()
{
clearInterval(intervalID);
}
<HTML>
<HEAD>
<META name="GENERATOR" content=“Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT language="javascript">
<!--
var intervalID;
function copy()
{
Dest.value=Source.value;
}
function Source_onfocusin()
{
intervalID=setInterval("copy()", 50);
}
function Source_onfocusout()
{
clearInterval(intervalID);
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor=Peachpuff>
<P> </P>
<P>输入:
<INPUT size=27 name="Source"
style="width: 189px; height: 22px"
language=javascript
onfocusin="return Source_onfocusin()"
onfocusout="return Source_onfocusout()">
<BR></P>
<P>输出:
<INPUT size=27 name="Dest" style="width: 190px; height: 22px">
<BR></P>
</BODY>
</HTML>
保存文件，在浏览器中浏览网页文件，结果如图1-16所示。
图1-16 实时显示用户输入
E- mail:
本站ICP备案号：
